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: about 2 hours 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 (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T01:42:07.000Z (about 1 year ago)
• Last Synced: 2024-10-12T00:37:24.680Z (about 1 month ago)
• Topics: hover, hover-components, react, react-component
• Language: JavaScript
• Homepage:
• Size: 7.37 MB
• Stars: 107
• Watchers: 8
• 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




  

    

  

  

    

  

 

    

 

  

    

  

  

    

  

  

    

  







![React hover](src/example/react-hover-new.gif)

## 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 [email protected]: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?

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/X8X71IORB)

## License

MIT

## Contributors

Thanks to these wonderful developers for helping this project: