https://github.com/paulrosset/rehover
👐 React hovering on two elements made simpler!
https://github.com/paulrosset/rehover
animation hover react react-hovering
Last synced: 6 months ago
JSON representation
👐 React hovering on two elements made simpler!
- Host: GitHub
- URL: https://github.com/paulrosset/rehover
- Owner: PaulRosset
- License: mit
- Created: 2018-03-19T21:15:56.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T14:27:58.000Z (almost 3 years ago)
- Last Synced: 2025-08-17T03:06:57.146Z (6 months ago)
- Topics: animation, hover, react, react-hovering
- Language: JavaScript
- Homepage:
- Size: 5.64 MB
- Stars: 76
- Watchers: 3
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rehover 👐
#### React hovering on two elements made simpler!
[](https://travis-ci.org/PaulRosset/rehover)
[](https://badge.fury.io/js/rehover)
## Install
```sh
yarn add rehover
```
## Usage
> React v16.0 required, [rendering arrays in render method.](https://reactjs.org/blog/2017/09/26/react-v16.0.html)
### To build something quickly...
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
```js
import React from "react";
import { Rehover } from "rehover";
```
```jsx
Hover me!
```
### To go further...
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**](https://reactjs.org/docs/context.html).
* **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.
```js
import React from "react";
import { RehoverProvider, RehoverConsumer } from "rehover";
```
```jsx
{({ states, actions }) => (
Hover me !
{states.isOnSource || states.isOnTarget ? (
List of items:
Item1
Item2
Item3
) : null}
)}
```
> The new React context Api is available since the 16.3.0 version.
## API
* Delay: Number `delay`
* To let you the time to go to the target.
* States: Function `states`
* Function with `isOpen`, `isOntarget` and `isOnSource` as parameter `Boolean`, to let you construct animation for example.
> 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.
## Live demo/Sandbox
[](https://codesandbox.io/s/0o78oxx3w0)
## License
MIT Paul Rosset