https://github.com/cht8687/react-hover
React hover --- make hover easy http://cht8687.github.io/react-hover/example/
https://github.com/cht8687/react-hover
hover hover-components react react-component
Last synced: 10 months ago
JSON representation
React hover --- make hover easy http://cht8687.github.io/react-hover/example/
- Host: GitHub
- URL: https://github.com/cht8687/react-hover
- Owner: cht8687
- License: mit
- Created: 2015-12-13T00:53:36.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T01:42:07.000Z (over 2 years ago)
- Last Synced: 2025-03-30T21:06:38.335Z (11 months ago)
- Topics: hover, hover-components, react, react-component
- Language: JavaScript
- Homepage:
- Size: 7.37 MB
- Stars: 106
- Watchers: 7
- Forks: 25
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Hover --- Turn anything to a 'hoverable' object
## Installation
### npm
```
$ npm install --save react-hover
```
## Codesandbox Demo
[Codesandbox example](https://codesandbox.io/s/charming-snyder-3hund?fontsize=14&hidenavigation=1&theme=dark)
## Demo
[Demo](http://cht8687.github.io/react-hover/example/)
## 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?
[](https://ko-fi.com/X8X71IORB)
## License
MIT
## Contributors
Thanks to these wonderful developers for helping this project:
