Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

useAnimationFrame.d.ts 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. export interface UseAnimationFrameReturn {
  2. cancel(): void;
  3. /**
  4. * Request for the provided callback to be called on the next animation frame.
  5. * Previously registered callbacks will be cancelled
  6. */
  7. request(callback: FrameRequestCallback): void;
  8. /**
  9. * Request for the provided callback to be called on the next animation frame.
  10. * Previously registered callbacks can be cancelled by providing `cancelPrevious`
  11. */
  12. request(cancelPrevious: boolean, callback: FrameRequestCallback): void;
  13. }
  14. /**
  15. * Returns a controller object for requesting and cancelling an animation freame that is properly cleaned up
  16. * once the component unmounts. New requests cancel and replace existing ones.
  17. *
  18. * ```ts
  19. * const [style, setStyle] = useState({});
  20. * const animationFrame = useAnimationFrame();
  21. *
  22. * const handleMouseMove = (e) => {
  23. * animationFrame.request(() => {
  24. * setStyle({ top: e.clientY, left: e.clientY })
  25. * })
  26. * }
  27. *
  28. * const handleMouseUp = () => {
  29. * animationFrame.cancel()
  30. * }
  31. *
  32. * return (
  33. * <div onMouseUp={handleMouseUp} onMouseMove={handleMouseMove}>
  34. * <Ball style={style} />
  35. * </div>
  36. * )
  37. * ```
  38. */
  39. export default function useAnimationFrame(): UseAnimationFrameReturn;