@cjenaro/useanimateonshow

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

How to use the library

Notes

• The library uses React Spring if you don't know how to use it refer to their docs

• The library uses the Intersection Observer API to get when the element is showing on screen, if you want/need IE 11 support, you will need a polyfill

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

{ infinite: true, 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