react-hover

Added default options:

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

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.

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

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'>

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>

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

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}
 />

Add in touch support for mobile devices.