@withvoid/melting-pot/docs/hooks/useHover/index.mdx

A react utility library

---
name: useHover
menu: Hooks
---

import { Playground } from 'docz';
import { useHover } from '../../../src';

# useHover

```
const { hover, bind } = useHover();
```

## Examples

<Playground>
  {() => {
    const { hover, bind } = useHover();
    const styles = {
      wrapper: {
        height: 300,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer',
        backgroundColor: 'white',
        color: 'black',
      },
      emphasis: {
        color: 'tomato',
        textTransform: 'capitalize',
      },
    };
    return (
      <div {...bind} style={styles.wrapper}>
        <p>Hover on the white background to change the hover status</p>
        <p>
          Status: <span style={styles.emphasis}>{String(hover)}</span>
        </p>
      </div>
    );
  }}
</Playground>

## API

useHover() returns an Object

- hover: [boolean] Status if active or not
- bind [Object] Has `onMouseDown` & `onMouseUp` functions that we can spread to
  the element.