????????????Perform animations on component mount with useRequestAnimationFrame ⚛️React hooks ????

useRequestAnimationFrame

Takes care of running an animating function, provided as the first argument, while keeping track of its progress.

When used useRequestAnimationFrame immediately starts a looping call the provided function by using window.requestAnimationFrame under the hood.

The provided function receives the animation progress and a next function to be performed to keep the animation alive.

The loop ends when the animation progress reaches the value of 100. (or any other value provided as finishAt , check the options)

Why? :bulb:

• Easily manage a requestAnimationFrame function within a React component

Basic Usage

import { useRef } from 'react';
import { Alert } from 'beautiful-react-ui';
import { useRequestAnimationFrame } from 'beautiful-react-hooks'; 

const AnimationExample = () => {
   const ref = useRef();
   
   useRequestAnimationFrame((progress, next) => {
      ref.current.style.transform = `translateX(${progress}px)`;
      next();
   });

   return (
     <DisplayDemo>
      <div ref={ref}>
        <Alert color="primary" >Animating content</Alert>
      </div>
     </DisplayDemo>
   );
};

<AnimationExample />

Options

An object of options can be used as second argument to control the animation.

Please note: options.finishAt = -1 will cause an infinite animation

import { useRef } from 'react';
import { Alert } from 'beautiful-react-ui';
import { useRequestAnimationFrame } from 'beautiful-react-hooks'; 

const AnimationExample = () => {
   const ref = useRef();
   const options = {increment: 0.5, startAt: 0, finishAt: -1 };

   useRequestAnimationFrame((progress, next) => {
      ref.current.style.transform = `rotate(${progress}deg)`;
      next();
   }, options);

   return (
     <DisplayDemo>
      <div ref={ref}>
        <Alert color="primary" >Animating content</Alert>
      </div>
     </DisplayDemo>
   );
};

<AnimationExample />

onFinish callback

The hook returns an function to possibly set a callback when the animation finishes:

import { useRef, useState } from 'react';
import { Alert, Paragraph } from 'beautiful-react-ui';
import { useRequestAnimationFrame } from 'beautiful-react-hooks'; 

const AnimationExample = () => {
   const ref = useRef();
   const [isFinished, setIsFinished] = useState(false);
   const onFinish = useRequestAnimationFrame((progress, next) => {
      ref.current.style.transform = `translateX(${progress}px)`;
      next();
   });

   onFinish(() => setIsFinished(true)); 

   return (
     <DisplayDemo>
      <div ref={ref}>
        <Alert color="primary" >Animating content</Alert>
      </div>
     {isFinished && <Paragraph>Animation completed!</Paragraph>}
     </DisplayDemo>
   );
};

<AnimationExample />

:white_check_mark: Pro tip:

Control the speed of your animation by changing the increment value

Mastering the hook

:white_check_mark: When to use

• When in need to perform requestAnimationFrame without re-rendering the component on each frame