{"id":"howmanysmall/react-spring","name":"react-spring","scope":"howmanysmall","platform":"roblox","description":"A modern spring-physics based animation library for Roact inspired by react-spring","version":"3.0.0","latest":"3.0.0","versions":["3.0.0"],"license":"MIT","licenseRating":"safe","licenseCaveats":[],"licenseVerified":true,"dependencies":{"jsdotlua/luau-polyfill":{"version":"^1.0.0","alias":"LuauPolyfill"},"howmanysmall/typed-promise":{"version":"^4.0.0","alias":"Promise"},"jsdotlua/react":{"version":"^17.0.0","alias":"React"},"jsdotlua/react-roblox":{"version":"^17.0.0","alias":"ReactRoblox"},"howmanysmall/better-signal":{"version":"^2.1.0","alias":"Signal"}},"integrity":"8fe09f20f0197b20eebb2d09a0d78732bb930057cff46c76dc7300cb20aa43b6","likes":0,"downloads":0,"install":"forest install howmanysmall/react-spring","url":"https://forest.dev/p/roblox/howmanysmall/react-spring","files":"https://api.forest.dev/ai/package/roblox/howmanysmall/react-spring/files","readme":"<a href=\"https://www.chrisc.dev/roact-spring/\">\r\n  <p align=\"center\">\r\n    <img src=\"https://i.imgur.com/1Ta6WRv.png\" width=\"200\" />\r\n  </p>\r\n</a>\r\n\r\n<h1 align=\"center\">roact-spring</h1>\r\n<h3 align=\"center\">A modern spring-physics based </br> animation library for Roact inspired by react-spring</h3>\r\n\r\n<br>\r\n\r\n<div align=\"center\">\r\n  <a href=\"https://github.com/chriscerie/roact-spring/actions/workflows/docs.yml\">\r\n    <img src=\"https://github.com/chriscerie/roact-spring/workflows/docs/badge.svg\" alt=\"Deploy Docs Status\"/>\r\n  </a>\r\n  <a href=\"https://badge.fury.io/js/@rbxts%2Froact-spring\">\r\n    <img src=\"https://badge.fury.io/js/@rbxts%2Froact-spring.svg\" alt=\"npm version\" height=\"18\">\r\n  </a>\r\n</div>\r\n\r\n<br>\r\n\r\n## Why roact-spring\r\n\r\n### Declarative and imperative\r\n`roact-spring` is the perfect bridge between declarative and imperative animations. It takes the best of both worlds and packs them into one flexible library.\r\n\r\n### Fluid, powerful, painless\r\n`roact-spring` is designed to make animations fluid, powerful, and painless to build and maintain. Animation becomes easy and approachable, and everything you do look and feel natural by default.\r\n\r\n### Versatile\r\n`roact-spring` works with most data types and provides extensible configurations that makes it painless to create advanced animations.\r\n\r\n## Installation\r\n\r\n### Wally\r\n\r\n`roact-spring` has two packages to support [react-lua](https://github.com/jsdotlua/react-lua) and [legacy Roact](https://github.com/Roblox/roact). It's crucial to install the correct package or you **will** encounter bugs. To install, add the latest version of roact-spring to your wally.toml:\r\n\r\n#### With react-lua\r\n```console\r\nReactSpring = \"chriscerie/react-spring@<version>\"\r\n```\r\n\r\nNote: react-lua packages under the scope jsdotlua must use react-spring >= 2.0. react-lua packages under the legacy scope corepackages must use react-spring v1.\r\n\r\n#### With legacy Roact\r\n```console\r\nRoactSpring = \"chriscerie/roact-spring@<version>\"\r\n```\r\n\r\n### roblox-ts\r\n\r\n`roact-spring` is also available for roblox-ts projects. Install it with [npm](https://www.npmjs.com/package/@rbxts/roact-spring):\r\n```console\r\nnpm i @rbxts/roact-spring\r\n```\r\n\r\n## Getting Started\r\n\r\nGetting started with roact-spring is as simple as:\r\n\r\n### Declarative\r\n```lua\r\nlocal toggle, setToggle = React.useState(false)\r\nlocal styles = RoactSpring.useSpring({\r\n    transparency = if toggle then 1 else 0,\r\n})\r\n\r\n-- Later\r\nsetToggle(function(prevState)\r\n    return not prevState\r\nend)\r\n```\r\n\r\n### Imperative\r\n\r\n```lua\r\nlocal styles, api = RoactSpring.useSpring(function()\r\n    return {\r\n        position = UDim2.fromScale(0.3, 0.3),\r\n        rotation = 0,\r\n    }\r\n})\r\n\r\n-- Later\r\napi.start({\r\n    position = UDim2.fromScale(0.5, 0.5),\r\n    rotation = 45,\r\n    config = { tension = 170, friction = 26 },\r\n})\r\n```\r\n\r\nMore information can be found in roact-spring's official [documentation](https://www.chrisc.dev/roact-spring/).\r\n\r\n## Demos\r\n\r\nThese demos are publicly available. Click on each gif to go to their source.\r\n\r\n### Draggable element\r\n\r\n<a href=\"stories/hooks/useSpringDrag.story.lua\">\r\n  <img src=\"https://media.giphy.com/media/R2bJ57MNTdP7vmP6Ez/giphy.gif\" width=\"300\" />\r\n</a>\r\n\r\n### Draggable list\r\n\r\n<a href=\"stories/hooks/useSpringsList.story.lua\">\r\n  <img src=\"https://media.giphy.com/media/4qOEZ93YjhfKtSlx7b/giphy.gif\" width=\"300\" />\r\n</a>\r\n\r\n### Staggered list\r\n\r\n<a href=\"stories/hooks/useTrailList.story.lua\">\r\n  <img src=\"https://media.giphy.com/media/XfG0GNKGCKang91lLN/giphy.gif\" width=\"300\" />\r\n</a>\r\n\r\n### Staggered text\r\n\r\n<a href=\"stories/hooks/useTrailText.story.lua\">\r\n  <img src=\"https://media.giphy.com/media/9llkynmhlsUvZCupPz/giphy.gif\" width=\"300\" />\r\n</a>\r\n\r\n### Trailing elements\r\n<a href=\"stories/hooks/useTrailFollow.story.lua\">\r\n  <img src=\"https://media.giphy.com/media/BS20XRr522AJgkCyZR/giphy.gif\" width=\"300\" />\r\n</a>\r\n\r\n## License\r\n\r\n`roact-spring` is available under the MIT license. See [LICENSE](LICENSE) for details.","readmeTruncated":false}