React Hover Versions Save

React hover --- make hover easy http://cht8687.github.io/react-hover/example/

v3.0.1

2 years ago

v2.1.0

2 years ago

Added default options:

 static defaultProps = {   
   options: {      
       followCursor: true,      
       shiftX: 20,      
       shiftY: 0    
    },  
 }

2.0.0

3 years ago

Breaking changes in 2.0.0:

export Trigger and Hover component directly for better Typescript support.


import ReactHover, { Trigger, Hover } from 'react-hover'

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

Note, React.Trigger and React.Hover only existed in 1.X versions.

1.3.5

5 years ago

Fixed flickering issue when hover and trigger component are at same position.

Issue: https://github.com/cht8687/react-hover/issues/21 PR: https://github.com/cht8687/react-hover/pull/30

1.3.2

6 years ago

Add in type prop to fix issue with production minify/uglify code issue. https://github.com/cht8687/react-hover/issues/11.

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

v1.0.0

7 years ago

Breaking changes: API has changed to make this lib easier to use:

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

Below is the example of custom components:

<ReactHover
  options={optionsCursorTrueWithMargin}>
  <ReactHover.Trigger>
    <TriggerComponent />
  </ReactHover.Trigger>
  <ReactHover.Hover>
    <HoverComponent />
  </ReactHover.Hover>
</ReactHover>

Or plain HTML element:

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

0.6.3

7 years ago

Now you can use react-hover on IE9 and IE10.

0.6.2

7 years ago

Add in className option:


<ReactHover
    className='basic'  // now you can add your own class for Outer container
    styles={styles.basic}
    componentHtml={componentHtml.basicComponentHtml}
    options={optionsCursorFalse}
 />

v0.5.0

8 years ago

Add in touch support for mobile devices.