> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/components/observers/hoverobserver.md).

# HoverObserver 📌

A React component that notifies its children of hover interactions.

Initial code taken from: <https://github.com/ethanselzer/react-hover-observer>.

{% hint style="info" %}

#### System Component 📌

This component is shipped with BlueBase Core.
{% endhint %}

## Usage

```jsx
<HoverObserver>
 {({ isHovering }) => (
         <YourChildComponent isActive={isHovering} />
 )}
</HoverObserver>
```

{% hint style="info" %}
`isHovering` is always false on Android or iOS.
{% endhint %}

## Properties

| prop              | type                                             | required | default | description                                                            |
| ----------------- | ------------------------------------------------ | -------- | ------- | ---------------------------------------------------------------------- |
| hoverDelayInMs    | *number*                                         | *no*     | 0       | Milliseconds to delay hover trigger.                                   |
| hoverOffDelayInMs | *number*                                         | *no*     | 0       | Milliseconds to delay hover-off trigger.                               |
| onHoverChanged    | *(HoverObserverState) => void*                   | *no*     | -       | Called with named argument isHovering when isHovering is set or unset. |
| onMouseEnter      | *Function*                                       | *no*     | -       | Defaults to set isHovering.                                            |
| onMouseLeave      | *Function*                                       | *no*     | -       | Defaults to unsetting isHovering.                                      |
| onMouseOver       | *Function*                                       | *no*     | -       |                                                                        |
| onMouseOut        | *Function*                                       | *no*     | -       |                                                                        |
| children          | *ReactNode \| (HoverObserverState) => ReactNode* | *no*     | -       |                                                                        |
| testID            | *string*                                         | *no*     | -       | Used to locate this view in end-to-end tests.                          |