react-hover

    3.0.0 • Public • Published

    Join the chat at https://gitter.im/cht8687/react-hover

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

    Circle CI NPM Version Coverage Status Build Status Downloads Dependency Status License

    React hover

    Installation

    npm

    $ 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:

    <ReactHover options={optionsCursorTrueWithMargin}>
      <Trigger type="trigger">
        <TriggerComponent />
      </Trigger>
      <Hover type="hover">
        <HoverComponent />
      </Hover>
    </ReactHover>

    Or plain HTML element:

    <ReactHover options={optionsCursorTrueWithMargin}>
      <Trigger type="trigger">
        <h1 style={{ background: '#abbcf1', width: '200px' }}> Hover on me </h1>
      </Trigger>
      <Hover type="hover">
        <h1> I am hover HTML </h1>
      </Hover>
    </ReactHover>

    Options

    options: PropTypes.object.isRequired

    Set the options.

    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.

    <Trigger type='trigger'>
    <Hover type='hover'>

    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?

    ko-fi

    License

    MIT

    Contributors

    Thanks to these wonderful developers for helping this project:

    Install

    npm i react-hover

    DownloadsWeekly Downloads

    1,246

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    29.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • cht8687