@cjenaro/useanimateonshow

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

Usage no npm install needed!

<script type="module">
  import cjenaroUseanimateonshow from 'https://cdn.skypack.dev/@cjenaro/useanimateonshow';
</script>

README

@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

{ 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