Interpolator

import { Interpolator } from "@lualtek/react-components";
import { useState, useCallback } from 'react';
 
export default () => {
  const [isInterpolating, setIsInterpolating] = useState(false);
 
  const interpolate = useCallback(
    () => {
      setIsInterpolating(true);
      setTimeout(() => {
        setIsInterpolating(false);
      }, 2000);
    }, [setIsInterpolating],
  );
 
  return (
    <UI.Interpolator
      interpolating={isInterpolating}
      exitComponent={<Button onClick={() => interpolate()}>Interpolate</Button>}
      enterComponent={<LinearProgress style={{ width: 300 }} />}
    />
  );
};

export type InterpolatorProps = {
  /**
   * The component to be rendered as default which will be animated out.
   */
  exitComponent: ReactNode;
  /**
   * The component that will enter the screen.
   */
  enterComponent: ReactNode;
  /**
   * If the component is currently interpolating.
   *
   * @defaultValue false
   */
  interpolating: boolean;
  /**
   * The initial scale of the entering component.
   *
   * @defaultValue [0.5, 2.5]
   */
  enterScale?: [number, number];
  /**
   * The initial rotation of the entering component.
   *
   * @defaultValue 0
   */
  enterRotation?: number;
  /**
   * The final scale of the exiting component.
   *
   * @defaultValue [3.5, 0.5]
   */
  exitScale?: [number, number];
  /**
   * The final rotation of the exiting component.
   *
   * @defaultValue 0
   */
  exitRotation?: number;
  /**
   * The duration of the animation.
   *
   * @defaultValue 200
   */
  duration?: TokensTypes['duration'];
}