anim-react
TypeScript icon, indicating that this package has built-in type declarations

1.1.212 • Public • Published

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

/anim-react/

    Package Sidebar

    Install

    npm i anim-react

    Weekly Downloads

    1

    Version

    1.1.212

    License

    ISC

    Unpacked Size

    14.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • k-gorod