react-animate-props
React HOC (higher order component) method, and React Hook for transforming your favorite components to animate prop values on change.
This package uses Tweenkle for handling the tweening of prop values. It’s not as full-featured as GSAP, but it works pretty well for basic value and object tweening.
Install
Via npm
npm install --save react-animate-props
Via Yarn
yarn add react-animate-props
How to use
react-animate-props
now offers two(!) ways for you to animate the props in both
your class-based, and functional, React components.
Hook
useAnimateProps
Parameters
prop : Number
- Value to animateoptions : Object
- Options to define the tween properties to use.
Default options:
delay: 0 // Delay to apply before the tween starts duration: 1000 // Duration of the tween in milliseconds ease: EasingQuadOut // Ease to use for the tween, @see [Tweenkle](https://github.com/ryanhefner/tweenkle) for options value // Callback to use during the tweening process, as well as being able to manipulate the value during the tween value // Callback for when the tween has completed, as well as being able to manipulate the final value of the tween
Example
;;; const AnimatedNumberLabel = { const animatedNumber = ; return <span>animatedNumber</span>;}; ;
HOC (Higher Order Component)
animateProps
is a higher order component
that allows you to easily create components who’s props animate when changed.
Whether you’re writing a new component, or would like to make an animated version
of an existing component, just export your component and pass it through, animateProps
.
Parameters
-
component:Class
- Class to applyanimateProps
logic to. -
defaultProps:Object
- Default props declared for the component being animated. (Default:{}
)
Properties
-
animatedProps:Object
- Object defining which props to animate, and the tween settings for each.animateProps
uses the Tweenkle tweening library, specifically aTween
instance, and you can pass whatever props that library supports via the tween settings. You can find out more by reading the Tweenkle README. -
onAnimateProgress:Function
- Callback available to manipulate theprop
before it is applied to the state. (Example:(prop, value) => { return { [prop]: value }; }
) -
onAnimateComplete:Function
- Callback fired when the animation for aprop
completes. (Example:(prop, value, tweensActive) => {}
)
Example
;;;; { const number = thisprops; return <span> number </span> ; } AnimatedNumberLabelpropTypes = animatedProps: PropTypesobject number: PropTypesnumber onAnimateProgress: PropTypesfunc; AnimatedNumberLabeldefaultProps = animatedProps: number: ease: EasingQuadIn delay: 500 duration: 1500 number: 0 { return prop: Math ; } { return prop: Math ; }; AnimatedNumberLabel AnimatedNumberLabeldefaultProps;