https://github.com/artelydev/use-listen-on-animation-frame

Better alternative to setInterval for frequent changes in your UI
https://github.com/artelydev/use-listen-on-animation-frame

animation animation-frame interval react react-hook use-animation-frame

Last synced: 5 days ago
JSON representation

Better alternative to setInterval for frequent changes in your UI

• Host: GitHub
• URL: https://github.com/artelydev/use-listen-on-animation-frame
• Owner: artelydev
• License: mit
• Created: 2022-10-21T17:09:16.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-23T04:56:45.000Z (28 days ago)
• Last Synced: 2024-10-28T17:33:17.564Z (23 days ago)
• Topics: animation, animation-frame, interval, react, react-hook, use-animation-frame
• Language: TypeScript
• Homepage: https://artelydev.github.io/use-listen-on-animation-frame/
• Size: 274 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
useListenOnAnimationFrame




  Invoke & track your functions on every animation frame

  


  

    ESM

    · CommonJS

    · 1 dependency

  





  

        

  

    

  

    

    

  

  

  



Navigation


- [Quick start](#quick-start)

- [Docs (website)](https://artelydev.github.io/use-listen-on-animation-frame/)

- [Usage](./docs/usage.md)

- [Why this package](./docs/comparison.md)

- [API](./docs/api.md)

- [Advanced usage](./docs/advanced-usage.md)

- [Q&A](./docs/qa.md)

## Quick start

### Installation

```bash

$ npm i use-listen-on-animation-frame

```

### Use

Library provides 2 hooks which are `useAnimationFrame`, `useListenOnAnimationFrame`. See [Usage](./docs/usage.md), [API](./docs/api.md) and [Advanced usage](./docs/advanced-usage.md) for more.

#### Basic

Run function on every animation frame

```tsx

import React, { useCallback, useState } from "react";

import { useAnimationFrame } from "use-listen-on-animation-frame";

const Component = () => {

  const [date, setDate] = useState(new Date());

  const syncDate = useCallback(() => {

    setDate(new Date());

  }, []);

  useAnimationFrame(syncDate);

  return 
{date}
;

};

```


#### Multiple side effects

Run function once on every animation frame, and apply multiple listeners to it. Stop and start function & listeners when you want.

```tsx

import React, { useState } from "react";

import { useListenOnAnimationFrame } from "use-listen-on-animation-frame";

const getCostlyRandomNumber = () => {

  const random = Math.random() * 300;

  let counter = 0;

  for (; counter < random; counter++) {

    counter++;

  }

  return counter;

};

const Component = () => {

  const [number, setNumber] = useState(0);

  const [addListener, _removeListener, stop, start] = useListenOnAnimationFrame(

    getCostlyRandomNumber,

    { autoStart: false } // optional

  );

  useEffect(() => {

    addListener((thisFrameRandom, _previousFrameRandom) => {

      setNumber(thisFrameRandom);

    });

    addListener((thisFrameRandom) => {

      // do something;

    });

    addListener((thisFrameRandom) => {

      for (let i = 0; i < thisFrameRandom; i++) {

        // do something

      }

    });

  }, [addListener]);

  useEffect(() => {

    if (somethingBadHappened) {

      stop();

    }

  }, [stop, somethingBadHappened]);

  useEffect(() => {

    if (somethingGoodHappened) {

      start();

    }

  }, [start, somethingGoodHappened]);

  return (

    


      {number}

      

    

  );

};

```