https://github.com/tseijp/refr
🌃 request animation frame
https://github.com/tseijp/refr
animation frame hooks raf react reactive reactjs requestanimationframe solid solidjs tiny typescript
Last synced: 16 days ago
JSON representation
🌃 request animation frame
- Host: GitHub
- URL: https://github.com/tseijp/refr
- Owner: tseijp
- License: mit
- Created: 2023-01-04T05:36:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-16T05:25:00.000Z (about 2 years ago)
- Last Synced: 2025-06-09T12:45:49.684Z (11 months ago)
- Topics: animation, frame, hooks, raf, react, reactive, reactjs, requestanimationframe, solid, solidjs, tiny, typescript
- Language: TypeScript
- Homepage: https://refr.tsei.jp
- Size: 8.1 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔮refr
[](https://www.npmjs.com/package/refr)
[](https://www.npmjs.com/package/refr)
[](https://www.npmjs.com/package/refr)
- **Performance:** It's the fastest way to animate in React. It doesn't have to go through the React reconciler.
- **Familiar:** It's a hook, so you can use it in any function component.
- **Simple:** It's just a single function that you can call from anywhere.
- **Predictable:** You can cancel your animation at any time and it will run at 60fps.
- **Composable:** You can use it in conjunction with the state hook to create animations.
- **Extensible:** You can write your own hooks that depend on it.
- **Flexible:** You can use it to schedule updates or to set timeouts.
It's just a single function that you can call from anywhere. It's a hook that will run on every frame and give you the time delta. If you return `true` it will keep running, otherwise it will cancel.
You can also use it to set timeouts that will run on the next frame. This is useful when you want to force an update after a state change.
---
## Installation
```ruby
npm install refr
```
---
## Documentation
###### [Docs][docs] : refr Introduction
###### [API][api] : refr API and feature
###### [Guide][guide] : refr Getting Started
[docs]: https://refr.tsei.jp/docs
[api]: https://refr.tsei.jp/api
[guide]: https://refr.tsei.jp/guide
## Ecosystem
###### 🌇 [glre][glre]: GLSL Reactive Engine
###### ⛪️ [reev][reev]: reactive event state manager
[glre]: https://github.com/tseijp/refr
[reev]: https://github.com/tseijp/reev
## Staying informed
###### [github discussions][github] welcome✨
###### [@tseijp][twitter] twitter
###### [tsei.jp][articles] articles
[github]: https://github.com/tseijp/refr/discussions
[twitter]: https://twitter.com/tseijp
[articles]: https://tsei.jp/articles
---
## PRs
###### welcome✨
---
## API
```ts
import frame from 'refr'
// Schedule an update
frame.mount((dt) => {})
// Start an update loop
frame.mount((dt) => true)
// Cancel an update
frame.cancel(fn)
// Start the update loop
frame.start()
// Pause the update loop
frame.pause()
// Stop the update loop
frame.stop()
// Restart the update loop
frame.restart()
// Set a timeout that runs on nearest frame
frame.setTimeout(() => {}, 1000)
// Get the current time
frame.now() // => number
```
## Getting Started
```ts
import { useRef } from 'react'
import { useFrame } from 'refr'
function TrailSphere() {
const ref = useRef()
// Schedule an update
useFrame((ts) => {})
// Start an update loop
useFrame((ts) => true)
}
```
## License
MIT