#105AnimationsHard

useTween

useTween

React animation hook that tweens a number between 0 and 1.

Usage

import {useTween} from 'react-use';

const Demo = () => {
  const t = useTween();

  return (
    <div>
      Tween: {t}
    </div>
  );
};

Reference

useTween(easing?: string, ms?: number, delay?: number): number

Returns a number that begins with 0 and ends with 1 when animation ends.

  • easing — one of the valid easing names, defaults to inCirc.
  • ms — milliseconds for how long to keep re-rendering component, defaults to 200.
  • delay — delay in milliseconds after which to start re-rendering component, defaults to 0.
// TODO: implement useTween
function notImplemented(..._args: any[]): any {
  throw new Error('Not implemented');
}
export default notImplemented;
export const useTween = notImplemented;

Open browser consoleTests