{"id":16897762,"url":"https://github.com/behnammodi/react-dancing","last_synced_at":"2026-05-05T04:05:06.184Z","repository":{"id":65473043,"uuid":"290752847","full_name":"behnammodi/react-dancing","owner":"behnammodi","description":"react-dancing is a bit module for animation base on requestAnimationFrame","archived":false,"fork":false,"pushed_at":"2023-05-29T11:57:00.000Z","size":1106,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T12:31:50.303Z","etag":null,"topics":["animation","react"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/react-dancing","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/behnammodi.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-08-27T11:03:54.000Z","updated_at":"2023-05-29T11:57:05.000Z","dependencies_parsed_at":"2023-01-25T02:55:15.716Z","dependency_job_id":null,"html_url":"https://github.com/behnammodi/react-dancing","commit_stats":{"total_commits":182,"total_committers":1,"mean_commits":182.0,"dds":0.0,"last_synced_commit":"91ef69bf6c9c7e69aa6631e9b5b159c68784ec23"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freact-dancing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freact-dancing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freact-dancing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freact-dancing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/behnammodi","download_url":"https://codeload.github.com/behnammodi/react-dancing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244133928,"owners_count":20403518,"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","react"],"created_at":"2024-10-13T17:39:45.158Z","updated_at":"2026-05-05T04:05:01.147Z","avatar_url":"https://github.com/behnammodi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"For old version of `react-dancing` please go to [react-dancing version 0](https://github.com/behnammodi/react-dancing/tree/version-0)\n\n[![NPM](https://nodei.co/npm/react-dancing.png)](https://nodei.co/npm/react-dancing/)\n\n\u003ca href=\"https://www.npmjs.com/package/react-dancing\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-dancing.svg\" alt=\"Version\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://bundlephobia.com/result?p=react-dancing\"\u003e\n\u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-dancing\" alt=\"Minzipped size\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.npmjs.com/package/react-dancing\"\u003e\n  \u003cimg src=\"https://badgen.net/npm/dt/react-dancing\" alt=\"Downloads\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.npmjs.com/package/react-dancing\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/react-dancing.svg\" alt=\"License\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://snyk.io/test/npm/react-dancing\"\u003e\n  \u003cimg src=\"https://snyk.io/test/npm/react-dancing/badge.svg?style=flat-square\" alt=\"Known Vulnerabilities\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.codetriage.com/behnammodi/react-dancing\"\u003e\n  \u003cimg src=\"https://www.codetriage.com/behnammodi/react-dancing/badges/users.svg\" alt=\"Open Source Helpers\"\u003e \n\u003c/a\u003e\n\n\u003ca href=\"https://travis-ci.com/github/behnammodi/react-dancing\"\u003e\n  \u003cimg src=\"https://travis-ci.com/behnammodi/react-dancing.svg?branch=master\" alt=\"Build Status\"\u003e\n\u003c/a\u003e\n\n\n## Installation\n\nUsing npm:\n\n```bash\nnpm install react-dancing\n```\n\n## Big advantages\n\n- Animation base on `requestAnimationFrame`\n- Animation without re-render component\n- Less than 0.6 KB 💪 😀 [bundlephobia](https://bundlephobia.com/result?p=react-dancing)\n- Without dependency\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport { useDancer } from 'react-dancing';\n\nfunction App() {\n  const [ref, start, stop] = useDancer({\n    interpolate: {\n      transform: (x) =\u003e `translateX(${x * 100}px)`,\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv ref={ref}\u003eReact Dancing\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e start(0)}\u003eBack\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e start(1)}\u003eGo\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e stop()}\u003eStop\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## useDancer config\n\n| Prop           | Default | Desc                                                                                               |\n| -------------- | ------- | -------------------------------------------------------------------------------------------------- |\n| interpolate    | {}      | type is `object` and you must interpolate `x` to styles, ex: `` { height: x =\u003e `${x * 500}px` } `` |\n| duration       | 200     | type is `number` and base on milisecond                                                            |\n| delay          | 0       | type is `number` and base on milisecond                                                            |\n| timingFunction | x =\u003e x  | type is `function` you can find sample in [easings.net](https://easings.net/)                      |\n| defaultValue   | 0       | type is `number`, if you want to reverse aninmation set `1` and run `start(0)`                     |\n\nYou can see more sample of `react-dancing` in [here](https://codesandbox.io/s/react-dancing-version-1-8cdli)\n\n## Compare size\n\n| Package             | Size            |\n| ------------------- | --------------- |\n| react-spring        | 10.47 KB        |\n| framer-motion       | 28.15 KB        |\n| react-motion        | 4.76 KB         |\n| react-move          | 4.39 KB         |\n| react-dancing 💪 😀 | 0.6 KB          |\n| Last update         | **2020 Nov 30** |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Freact-dancing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbehnammodi%2Freact-dancing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Freact-dancing/lists"}