Skip to content

Commit

Permalink
Docs feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
Hugos68 committed May 3, 2024
1 parent 969d8ee commit 8bafb01
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ The `useInteractions` Svelte hook allows you to consume multiple interactions. I

```html
<script>
import { useFloating, useHover, useFocus, useInteractions } from '@skeletonlabs/floating-ui-svelte';
import { useFloating, useInteractions, useHover, useFocus } from '@skeletonlabs/floating-ui-svelte';
const floating = useFloating();
Expand All @@ -94,20 +94,20 @@ The `useInteractions` Svelte hook allows you to consume multiple interactions. I
<div {...interactions.getFloatingProps()}>Floating</div>
```

If you want to apply an event handler the an element using a props getter make sure to pass them through the getter instead of applying them directly:
If you want to apply an event handler the an element that is using a props getter make sure to pass them through the getter instead of applying them directly:
```diff
- <div {...interactions.getReferenceProps()} onclick={() => console.log('click!')}>Reference</div>
+ <div {...interactions.getReferenceProps({ onclick: () => console.log('click!') })}>Reference</div>
- <div {...interactions.getReferenceProps()} onclick={/* ... */}>Reference</div>
+ <div {...interactions.getReferenceProps({ onclick: /* ... */})}>Reference</div>
```
This will ensure all event handlers will be registered rather being overruled by eachother.

#### Return Value

| Property | Description | Type |
| -------- | ----------- | ---- |
| getReferenceProps | Function that returns spreadable properties for the `reference` element. | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
| getFloatingProps | Function that returns spreadable properties for the `floating` element. | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
| getItemProps | Function that returns spreadable properties for when dealing with a list inside the `floating` element. | (userProps?: HTMLAttributes<Element> & ExtendedUserProps) => Record<string, unknown> |
| getReferenceProps | The merged attributes for the `reference` element | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
| getFloatingProps | The merged attributes for the `floating` element | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
| getItemProps | The merged attributes for when dealing with a list inside the `floating` element. | (userProps?: HTMLAttributes<Element> & ExtendedUserProps) => Record<string, unknown> |

### useHover

Expand Down

0 comments on commit 8bafb01

Please sign in to comment.