Skip to content

๐Ÿ‘ React hovering on two elements made simpler!

License

Notifications You must be signed in to change notification settings

PaulRosset/rehover

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

25 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Rehover ๐Ÿ‘

React hovering on two elements made simpler!

Travis CI Build Status npm version

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

Edit j2rjln010w

License

MIT Paul Rosset

About

๐Ÿ‘ React hovering on two elements made simpler!

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published