React Hover --- Turn anything to a 'hoverable' object

alt="Circle CI">

alt="NPM Version">

alt="Build Status">

alt="Downloads">

alt="License">

!React hover

Installation

$3

``
$ npm install --save react-hover
`

Codesandbox Demo

Codesandbox example

Demo

Demo




Usage

You can turn plain HTML or your custom trigger/hover components in React-hover.

Below is the example of custom components:

`js








`

Or plain HTML element:

`js




Hover on me

I am hover HTML

`

Options

#### options: PropTypes.object.isRequired

Set the options.

`js
const options = {
followCursor: true,
shiftX: 20,
shiftY: 0,
}
`

followCursor: define if hover object follow mouse cursor
shiftX: left-right shift the hover object to the mouse cursor
shiftY: up-down shift the hover object to the mouse cursor

type

#### type: PropTypes.string

Set the type.

`js




`

This prop defines the type name. It must be declared as above if you minify your code in production.

Development

`
$ git clone git@github.com:cht8687/react-hover.git
$ cd react-hover
$ npm install
$ npm run dev
`

Then

`
open http://localhost:8080/webpack-dev-server/
``

Want to buy me a coffee?


License

MIT

Contributors

Thanks to these wonderful developers for helping this project: