React animation
This library makes possible to animate your React component with a few lines of code.
Instalation
From root directory:
npm i anim-react
or
yarn add anim-react
Usage
import { useRef } from 'react';
import { useAnim } from 'anim-react';
const myComponent = () => {
const refToMyComponent = useRef(null); // create whatever ref
/*
if you don't planning to interact with animation, you can proceed without "const myComponentAnimation ="
*/
const myComponentAnimation = useAnim({
ref: refToMyComponent, // pass ref
animName: "slideFromLeft" // name of predefined animation config
})
return (
<div ref={refToMyComponent}> MyComponent </div>
/* Do not forget to pass ref into your target component. */
)
}
export default myComponent;
API
useAnim(config)
useAnim | Custom React hook |
---|---|
config | Object with 3 fields: { ref, animName, userConfig, } |
ref |
React ref that you currently passing to target component. - type : React.MutableRefObject<HTMLElement | null> - required Definition example: const ref = useRef(null); |
animName | You can choose one of our predefined animations , and use it without any customisations if you want. - type : String |
userConfig | Object that provides animation definition/customisation : { isActive, keyframes, startInSight, ...any other JS animation option } Here you can Read more about animation keyframes/options._ |
isActive | Here you can define animation activity state (true/false): - type : Boolean - default : true |
keyframes | Animation frames that defines which and how style properties would be animated. Read more |
startInSight | If you want to your animation starts when target element becomes visible while scrolling provide true value here. - type : Boolean - default : false |
...other animation options | Here you can Read more about all animation options. |
Return
const return = useAnim(...);
return |
Object with next fields: { config, setState, updateConfig, hardStop, setEndCallback, } |
config | Object that contains all current configurations. |
setState |
Function that provide possibility to pause and play animation. Usage: setState( boolean ) // true or false or setState(( currentState )=> boolean ) // callback that returns true / false Example: setState( ( prev ) => !prev ); |
updateConfig |
Function that removing previous animation and starts new with provided in argument new config. Usage: updateConfig( { duration: 2000 } ); |
hardStop | Immediate animation cancel Function. |
setEndCallback |
Function that takes callback as argument. That callback will be invoked when animation will be finished or canceled. Usage: setEndCallback(() => { console.log('Animation finished'); }); |
Names
Already existing animation names:
- slideFromLeft
- slideFromRight
- slideFromTop
- slideFromBottom
- opacityAppear