react-hover-animation

A react wrapper component that detects hover and adds animation from the awesome react-spring. Works both on the web and mobile touch events.

Example:

https://react-hover-animation-example.netlify.com/

Install

npm:

npm install --save react-hover-animation

yarn:

yarn add react-hover-animation

Usage

Basic usage

import React from 'react'
import { AnimationWrapper } from 'react-hover-animation'

const App = () => {
  return (
    <AnimationWrapper>
      <h1>I animate on hover</h1>
    </AnimationWrapper>
  )
}
export default App

Default behavior

The wrapper component comes with a build-in behavior on hover, Animation will play and change the element opacity from 1 to 0.6 and change the element scale from 1 to 0.95. In order to change the default behavior, you can either pass the reset prop to reset these defaults or pass a config object with styles for initial and onHover state.

Optional props

• style: A style object for the wrapper component - styles will override the hover styles on the config object.
• config: A config object to declare more styles to change on hover or overrides the default behavior, must provide to each CSS property two values of the same type(initial and onHover).
  • initial: The initial style.
  • onHover: The style on hover.
• reset: A boolean that will reset the default behavior.
• animaionConfig: Config for the animation, can be either a regular react-spring-config-object or a string with the name of one of the react-spring-config-presets (default, gentle, wobbly, stiff, slow, molasses).

Usage with props

import React from 'react'
import { AnimationWrapper } from 'react-hover-animation'

const App = () => {
  return (
    <AnimationWrapper
      /* 
      normal react attributes like "className" are allowed 
      */
      className='animation-wrapper'
      /* 
      styles will override the hover styles 
      */
      style={{
        textAlign: 'center',
        borderRadius: '5px',
        padding: '5px',
        backgroundColor: 'lightblue',
      }}
      /* 
      must provide to each css property two values of the same type (initial and onHover)  
      */
      config={{
        color: {
          initial: 'black',
          onHover: 'red',
        },
      }}
      /* 
      resets the default behavior  
      */
      reset={true}
      /* 
      animation config using an object 
      */
      animationConfig={{
        duration: 500,
      }}
      /* 
      animation config using a preset
      */
      /* 
      animationConfig='molasses'
      */
    >
      <h1>I animate on hover</h1>
    </AnimationWrapper>
  )
}
export default App

The useHover hook

If you don't want to render a wrapper div you can also import a custom hook and apply the animation directly on the element. Optional config object can be passed as an argument to the hook with either styles or animation config object.

import React from 'react'
import { useHover } from 'react-hover-animation'

const App = () => {
  /* 
    first call the hook
  */
  const { spring, animated, setHover } = useHover({
    /* 
    optional styles...
    */
    color: {
      initial: 'black',
      onHover: 'red',
    },
    /* 
    animation config using an object 
    */
    animationConfig: {
      duration: 500,
    },
    /* 
    animation config using a preset
    */
    /* 
    animationConfig: 'molasses',
    */
  })
  return (
    /* 
    add 'animated' to the element
    */
    <animated.h1
      /* 
      add spring to the style object
      */
      style={spring}
      /* 
     add these two event handlers
     */
      onPointerOver={() => {
        setHover(true)
      }}
      onPointerOut={() => {
        setHover(false)
      }}
    >
      I animate on hover
    </animated.h1>
  )
}
export default App

License

MIT © lulu70