# useHover

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useHover
*Captured:* 2026-04-27T14:59:35.844Z

## useHover

### Example: Example 1

Lorem ipsum dolor sit amet

#### React (tsx)

```tsx
/* eslint-disable max-len */
import { useRef } from 'react';

import useHover from '@rio-cloud/rio-uikit/useHover';

export default () => {
    const ref = useRef<HTMLInputElement>(null);

    const isHover = useHover(ref);

    return (
        <div
            ref={ref}
            className='well display-flex gap-10 align-items-center border hover-border-color-primary max-width-300 cursor-pointer'
        >
            <span className='text-color-darker text-size-16 text-medium'>Lorem ipsum dolor sit amet</span>
            {isHover && <span className='rioglyph rioglyph-antenna text-size-20 text-color-primary' />}
        </div>
    );
};
```

#### HTML (html)

```html
<div class="well display-flex gap-10 align-items-center border hover-border-color-primary max-width-300 cursor-pointer">
    <span class="text-color-darker text-size-16 text-medium">Lorem ipsum dolor sit amet</span>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ref | React.Ref | — | The reference to the element that shall be hovered. |