yarn add rehoverReact v16.0 required, rendering arrays in render method.
If you don't need to build something very complex, Rehover component is what you need, like the example below:
- Pros:
- Easy to get started
- Very light to write (not verbose)
- Cons:
- Not very customizable
- Restricted to 2 children only
import React from "react";
import { Rehover } from "rehover";<Rehover delay={150}>
<button source>Hover me!</button>
<div destination>
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
</div>
</Rehover>However, if you want to write something more customizable and complex, you should try the example below, which is using the new Context API from React.
-
Pros:
- You are free to customize, you are not anymore restricted to two childrens.
- You are using the new context API 🔥
-
Cons:
- Much more verbose.
- Longer to write.
import React from "react";
import { RehoverProvider, RehoverConsumer } from "rehover";<RehoverProvider delay={150}>
<RehoverConsumer>
{({ states, actions }) => (
<div>
<button
onMouseEnter={actions.onMouseEnterSource}
onMouseLeave={actions.onMouseLeaveSource}
>
Hover me !
</button>
{states.isOnSource || states.isOnTarget ? (
<div>
<h4>List of items:</h4>
<div
onMouseEnter={actions.onMouseEnterTarget}
onMouseLeave={actions.onMouseLeaveTarget}
>
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</div>
) : null}
</div>
)}
</RehoverConsumer>
</RehoverProvider>The new React context Api is available since the 16.3.0 version.
-
Delay: Number
delay- To let you the time to go to the target.
-
States: Function
states- Function with
isOpen,isOntargetandisOnSourceas parameterBoolean, to let you construct animation for example.
- Function with
If you want to pass a React Component as a source or destination, make sure that they got a onMouseEnter props and a onMouseLeave props at their root.
MIT Paul Rosset