anim-react v1.1.212

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: 1. slideFromLeft 2. slideFromRight 3. slideFromTop 4. slideFromBottom 5. opacityAppear

Npm package GitHub repository