{"id":27055130,"url":"https://github.com/tseijp/refr","last_synced_at":"2026-04-10T20:48:57.200Z","repository":{"id":123132142,"uuid":"585020669","full_name":"tseijp/refr","owner":"tseijp","description":"🌃 request animation frame","archived":false,"fork":false,"pushed_at":"2024-03-16T05:25:00.000Z","size":8489,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T12:45:49.684Z","etag":null,"topics":["animation","frame","hooks","raf","react","reactive","reactjs","requestanimationframe","solid","solidjs","tiny","typescript"],"latest_commit_sha":null,"homepage":"https://refr.tsei.jp","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tseijp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-01-04T05:36:09.000Z","updated_at":"2023-03-07T15:52:18.000Z","dependencies_parsed_at":"2023-11-23T05:41:59.079Z","dependency_job_id":"513f337a-47af-4509-bed0-48d3639c44e5","html_url":"https://github.com/tseijp/refr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tseijp/refr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tseijp%2Frefr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tseijp%2Frefr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tseijp%2Frefr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tseijp%2Frefr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tseijp","download_url":"https://codeload.github.com/tseijp/refr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tseijp%2Frefr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261653262,"owners_count":23190424,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","frame","hooks","raf","react","reactive","reactjs","requestanimationframe","solid","solidjs","tiny","typescript"],"created_at":"2025-04-05T09:19:01.997Z","updated_at":"2026-04-10T20:48:52.181Z","avatar_url":"https://github.com/tseijp.png","language":"TypeScript","readme":"# 🔮refr\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://refr.tsei.jp\"\u003e\n  \u003cimg alt=\" \" src=\"https://refr.tsei.jp/img/REFR.gif\"\u003e\u003c/img\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n[![npm](https://img.shields.io/npm/v/refr.svg)](https://www.npmjs.com/package/refr)\n[![npm](https://img.shields.io/npm/dm/refr.svg)](https://www.npmjs.com/package/refr)\n[![npm](https://img.shields.io/npm/l/refr.svg)](https://www.npmjs.com/package/refr)\n\n- **Performance:** It's the fastest way to animate in React. It doesn't have to go through the React reconciler.\n- **Familiar:** It's a hook, so you can use it in any function component.\n- **Simple:** It's just a single function that you can call from anywhere.\n- **Predictable:** You can cancel your animation at any time and it will run at 60fps.\n- **Composable:** You can use it in conjunction with the state hook to create animations.\n- **Extensible:** You can write your own hooks that depend on it.\n- **Flexible:** You can use it to schedule updates or to set timeouts.\n\nIt'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.\n\nYou 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.\n\n---\n\n## Installation\n\n```ruby\nnpm install refr\n```\n\n---\n\n\u003ctable\u003e\n\u003ctd width=\"1000px\" valign=\"top\"\u003e\n\n## Documentation\n\n###### [Docs][docs] : refr Introduction\n\n###### [API][api] : refr API and feature\n\n###### [Guide][guide] : refr Getting Started\n\n[docs]: https://refr.tsei.jp/docs\n[api]: https://refr.tsei.jp/api\n[guide]: https://refr.tsei.jp/guide\n\n\u003c/td\u003e\n\u003ctd width=\"1000px\" valign=\"top\"\u003e\n\n## Ecosystem\n\n###### 🌇 [glre][glre]: GLSL Reactive Engine\n\n###### ⛪️ [reev][reev]: reactive event state manager\n\n[glre]: https://github.com/tseijp/refr\n[reev]: https://github.com/tseijp/reev\n\n\u003c/td\u003e\n\u003ctd width=\"1000px\" valign=\"top\"\u003e\n\n## Staying informed\n\n###### [github discussions][github] welcome✨\n\n###### [@tseijp][twitter] twitter\n\n###### [tsei.jp][articles] articles\n\n[github]: https://github.com/tseijp/refr/discussions\n[twitter]: https://twitter.com/tseijp\n[articles]: https://tsei.jp/articles\n\n\u003c/td\u003e\n\u003c/table\u003e\n\n---\n\n## PRs\n\n###### welcome✨\n\n---\n\n## API\n\n```ts\nimport frame from 'refr'\n\n// Schedule an update\nframe.mount((dt) =\u003e {})\n\n// Start an update loop\nframe.mount((dt) =\u003e true)\n\n// Cancel an update\nframe.cancel(fn)\n\n// Start the update loop\nframe.start()\n\n// Pause the update loop\nframe.pause()\n\n// Stop the update loop\nframe.stop()\n\n// Restart the update loop\nframe.restart()\n\n// Set a timeout that runs on nearest frame\nframe.setTimeout(() =\u003e {}, 1000)\n\n// Get the current time\nframe.now() // =\u003e number\n```\n\n## Getting Started\n\n```ts\nimport { useRef } from 'react'\nimport { useFrame } from 'refr'\n\nfunction TrailSphere() {\n        const ref = useRef()\n\n        // Schedule an update\n        useFrame((ts) =\u003e {})\n\n        // Start an update loop\n        useFrame((ts) =\u003e true)\n}\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftseijp%2Frefr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftseijp%2Frefr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftseijp%2Frefr/lists"}