{"id":13606836,"url":"https://github.com/pomber/use-spring","last_synced_at":"2025-04-16T03:45:22.222Z","repository":{"id":55741364,"uuid":"208145265","full_name":"pomber/use-spring","owner":"pomber","description":"Hooke's law hook","archived":false,"fork":false,"pushed_at":"2021-06-17T15:50:56.000Z","size":204,"stargazers_count":55,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T09:43:10.257Z","etag":null,"topics":["animation","hook","hooks","motion","physics","react","spring","transition"],"latest_commit_sha":null,"homepage":"https://usespring.pomb.us","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/pomber.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}},"created_at":"2019-09-12T20:58:20.000Z","updated_at":"2023-11-11T23:52:34.000Z","dependencies_parsed_at":"2022-08-15T06:40:46.149Z","dependency_job_id":null,"html_url":"https://github.com/pomber/use-spring","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fuse-spring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fuse-spring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fuse-spring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fuse-spring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pomber","download_url":"https://codeload.github.com/pomber/use-spring/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249192160,"owners_count":21227736,"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","hook","hooks","motion","physics","react","spring","transition"],"created_at":"2024-08-01T19:01:12.863Z","updated_at":"2025-04-16T03:45:22.205Z","avatar_url":"https://github.com/pomber.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# use-spring\n\n[![](https://badgen.net/bundlephobia/minzip/use-spring)](https://bundlephobia.com/result?p=use-spring) ![](https://badgen.net/david/dep/pomber/use-spring) ![](https://badgen.net/npm/types/use-spring)\n\nInstall\n\n```bash\nnpm install use-spring\n```\n\nUse\n\n```jsx\nimport React, { useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useSpring } from \"use-spring\";\n\nfunction App() {\n  const [target, setTarget] = useState(0);\n  const handleTargetChange = e =\u003e setTarget(+e.target.value);\n  const [current] = useSpring(target);\n  return (\n    \u003cdiv\u003e\n      \u003cinput type=\"range\" value={target} onChange={handleTargetChange} /\u003e\n      \u003cbr /\u003e\n      \u003cinput type=\"range\" value={current} readOnly /\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003cApp /\u003e, rootElement);\n```\n\n## Demos\n\n- [Basic Demo](https://codesandbox.io/s/use-spring-demo-fbbvn)\n- [Emoji Heads](https://codesandbox.io/s/use-spring-demo-irfq5?hidenavigation=1)\n\n## API\n\n```js\n// default values:\nconst [x, isMoving] = useSpring(target, {\n  stiffness: 170,\n  damping: 26,\n  mass: 1,\n  decimals: 2,\n  teleport: false,\n  from: target,\n  initialSpeed: 0\n});\n```\n\nYou can try different values of `stiffness`, `damping` or `mass` on the [Spring Editor](https://springs.pomb.us/).\n\n## Related\n\n- [react-spring](https://github.com/react-spring/react-spring)\n- [react-motion](https://github.com/chenglou/react-motion)\n- [framer-motion](https://www.framer.com/api/motion/)\n\n## MIT License\n\nCopyright (c) 2019 Rodrigo Pombo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomber%2Fuse-spring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpomber%2Fuse-spring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomber%2Fuse-spring/lists"}