README
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