useAnimationLoop.stories.mdx

import { Meta } from '@storybook/blocks';

useAnimationLoop

useAnimationLoop hook is a wrapper around requestAnimationFrame function. This hook will execute the passed callback function every frame.

Reference

function useAnimationLoop(callback: (delta: number) => void, enabled = false): void;

Parameters

• callback - function accepts delta parameter which represents time passed since last invocation;
• enabled - boolean which is used to play and pause the requestAnimationFrame

Returns

• void

Usage

function DemoComponent(): ReactElement {
  const [currentTimestamp, setCurrentTimestamp] = useState(Date.now);
  const [isRunning, toggleIsRunning] = useToggle(true);
  useAnimationLoop(() => {
    setCurrentTimestamp(Date.now);
  }, isRunning);

  return (
    <div>
      <div className="alert alert-primary">
        <h4 className="alert-heading">Instructions!</h4>
        <p className="mb-0">Click on the button to toggle the animation loop</p>
      </div>
      <div className="card border-dark" data-ref="test-area">
        <div className="card-header">Test Area</div>
        <div className="card-body">
          <p>{currentTimestamp}</p>

          <button
            type="button"
            // eslint-disable-next-line react/jsx-handler-names, react/jsx-no-bind
            onClick={(): void => {
              toggleIsRunning();
            }}
          >
            Toggle animation loop
          </button>
        </div>
      </div>
    </div>
  );
}