import { Meta, Canvas } from '@storybook/addon-docs/blocks'
import * as SyncStories from './../../../docs/guides/sync-grid.stories'

<Meta title="pv-grid/Hooks/useHoverSync" />

# useHoverSync

If you need to sync hover state of Grid row items across components.

```tsx
import { useHoverSync } from '@planview/pv-grid'
```

### Definition

```tsx
function useHoverSync: (rowId: GridRowId) => {
    isHovered: boolean;
    onMouseEnter: () => void;
    onMouseLeave: () => void;
}
```

### Usage

In the example below, the view wraps a `Grid` and a non-grid view next to it inside a `GridSyncProvider`.
The hook let's the provider know that _the item with id of `x` is hovered_ and the information is then shared across any consumers of the hook with the same id.

In the example below, the items on the right side share the id of the items in the grid.

```tsx
import { useHoverSync } from '@planview/pv-grid'

const PanelItem = ({ id, title }: TData) => {
    const { isHovered, onMouseEnter, onMouseLeave } = useHoverSync(id)
    return (
        <RightPanelItem
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            $isHovered={isHovered}
        >{`synced with ${title}`}</RightPanelItem>
    )
}
```

<Canvas of={SyncStories.Hover} />