Function useAnimateKeyframes

src/useAnimateKeyframes.ts:25–101

(
  props: UseAnimationKeyframesProps,
)

  | 'keyframes'
>;
export default function useAnimateKeyframes(
  props: UseAnimationKeyframesProps,
): {
  style: React.CSSProperties;
  play: (isPlaying: boolean) => void;
  pause: (isPaused: boolean) => void;
  isPlaying: boolean;
} {
  const {
    duration = DEFAULT_DURATION,
    delay = 0,
    easeType = DEFAULT_EASE_TYPE,
    direction = DEFAULT_DIRECTION,
    fillMode = DEFAULT_FILLMODE,
    iterationCount = 1,
    keyframes,
  } = props;
  const animationNameRef = React.useRef({
    forward: '',
    reverse: '',
  });
  const styleTagRef = React.useRef<
    Record<'forward' | 'reverse', HTMLStyleElement | null>
  >({
    forward: null,
    reverse: null,
  });
  const { register } = React.useContext(AnimateContext);
  const [isPlaying, setIsPlaying] = React.useState<boolean | null>(null);
  const [isPaused, setIsPaused] = React.useState(false);

  React.useEffect(() => {
    const styleTag = styleTagRef.current;
    const animationName = animationNameRef.current;

    animationNameRef.current.forward = createRandomName();
    let result = createTag({
      animationName: animationNameRef.current.forward,
      keyframes,
    });
    styleTagRef.current.forward = result.styleTag;

    animationNameRef.current.reverse = createRandomName();
    result = createTag({
      animationName: animationNameRef.current.reverse,
      keyframes: keyframes.reverse(),
    });
    styleTagRef.current.reverse = result.styleTag;

    register(props);

    return () => {
      deleteRules(styleTag.forward?.sheet, animationName.forward);
      deleteRules(styleTag.reverse?.sheet, animationName.reverse);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);