@cjenaro/useanimateonshow
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    @cjenaro/useanimateonshow

    Animate react components as they appear on the viewport with react-spring

    NPM JavaScript Style Guide

    How to use the library

    Notes

    Installation

    npm install @cjenaro/useanimateonshow react-spring
    yarn add @cjenaro/useanimateonshow react-spring

    Usage

    The useAnimateOnShow function takes in from and to objects that are just as the react spring useSpring argument, you can configure duration and spring config here too.

    import useAnimateOnShow from '@cjenaro/useanimateonshow'
     
    const Count: FunctionComponent = () => {
      const [Wrapper, ref, props] = useAnimateOnShow({ x: 0 }, { x: 100 })
     
      return (
        <h1>
          <Wrapper visible={ref}>
            {props.x.interpolate((x) => x.toFixed(2))}
          </Wrapper>
        </h1>
      )
    }

    Lastly, there is a third argument with some optional configuration

    { infinitetrue, onShow: (showing: boolean) => console.log(showing) }

    Infinite means that once the element leaves the screen it will animate out and then back in when it is shown again, there is also an optional onShow function that receives wether the element is showing or not.

    License

    MIT © jenaro94

    Keywords

    none

    Install

    npm i @cjenaro/useanimateonshow

    DownloadsWeekly Downloads

    16

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    19.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar