Rehover 👐

React hovering on two elements made simpler!

Install

yarn add rehover

Usage

React v16.0 required, rendering arrays in render method.

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

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>

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.

• 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.

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

License

MIT Paul Rosset