{"id":13406293,"url":"https://github.com/useAnimations/react-useanimations","last_synced_at":"2025-03-14T10:32:58.812Z","repository":{"id":35142718,"uuid":"212309840","full_name":"useAnimations/react-useanimations","owner":"useAnimations","description":"React-useanimations is a collection of free animated open source icons for React.js.","archived":false,"fork":false,"pushed_at":"2024-06-12T18:03:38.000Z","size":6324,"stargazers_count":1106,"open_issues_count":11,"forks_count":46,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-10-15T00:21:11.568Z","etag":null,"topics":["animation","lottie","lottie-animation","micro-animations","micro-interactions","react"],"latest_commit_sha":null,"homepage":"http://react.useanimations.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/useAnimations.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-02T10:20:55.000Z","updated_at":"2024-10-13T16:09:48.000Z","dependencies_parsed_at":"2023-11-20T10:38:01.627Z","dependency_job_id":"65e7b3ed-e44d-47b0-a434-78618b3cc894","html_url":"https://github.com/useAnimations/react-useanimations","commit_stats":{"total_commits":69,"total_committers":7,"mean_commits":9.857142857142858,"dds":"0.37681159420289856","last_synced_commit":"74d0cdade81ce7841999de99af094024a38ff604"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useAnimations%2Freact-useanimations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useAnimations%2Freact-useanimations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useAnimations%2Freact-useanimations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/useAnimations%2Freact-useanimations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/useAnimations","download_url":"https://codeload.github.com/useAnimations/react-useanimations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221458366,"owners_count":16825300,"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","lottie","lottie-animation","micro-animations","micro-interactions","react"],"created_at":"2024-07-30T19:02:26.413Z","updated_at":"2025-03-14T10:32:58.802Z","avatar_url":"https://github.com/useAnimations.png","language":"TypeScript","readme":"## React UseAnimations Icons\n\n[![npm version](https://img.shields.io/npm/v/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations) [![npm downloads](https://img.shields.io/npm/dm/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations)\n\n#### What is react-useanimations?\n\nReact-useanimations is a collection of free animated open source icons for React.js.\n\n#### Collection\n\n[https://react.useanimations.com](https://react.useanimations.com/) and play with examples or visit our [Storybook](https://useanimations.github.io/react-useanimations/)\n\n![](useanimations-preview.gif)\n\n### Installation\n\nUsing Yarn:\n\n```\nyarn add react-useanimations\n```\n\nor using NPM:\n\n```\nnpm install -S react-useanimations\n```\n\n### Usage\nIf you still need to use v1, please refer to this README instead - [react-useanimations@v1](https://github.com/useAnimations/react-useanimations/blob/master/README_v1.md)\n\nBasic usage\n```javascript\nimport React from 'react';\nimport UseAnimations from 'react-useanimations';\n// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -\u003e YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS\nimport github from 'react-useanimations/lib/github'\n\nconst App = () =\u003e \u003cUseAnimations animation={github} /\u003e;\n\nexport default App;\n```\n\nIcons can be configured with inline props:\n\n```javascript\n\u003cUseAnimations animation={github} size={56} wrapperStyle={{ padding: 100 }} /\u003e\n```\n\nThese props are available:\n| Prop           | Default      | Definition   |\n| :------------- | :----------: | -----------: |\n| animation   | / | animation file |\n|  size | `24`   | animation size    |\n|  strokeColor | `'inherit'`   | animation stroke color |\n|  fillColor   | `''`          | animation fill color\n|  wrapperStyle | `{}` | wrapper div styles |\n|  pathCss | `''` | css string for the animation path element |\n|  reverse | `false` | assing to `true` when eg. checkbox should be checked initally |\n|  autoplay | `false`* | false except in animations like loading etc. |\n|  loop | `false`* | false except in animations like loading etc. |\n|  options | `{}` | provide any other custom options which will override the default ones |\n|  speed | `1` | a number to determine the speed of lottie(1 is normal speed) |\n\n\u003cbr /\u003e\nControlled checkbox example  \n\n```javascript\nexport const RadioButton = () =\u003e {\n  // JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT\n  const [checked, setChecked] = useState(true);\n\n  return (\n    \u003cdiv style={{ padding: '20px' }}\u003e\n      \u003cspan\u003eradioButton\u003c/span\u003e\n      \u003cUseAnimation\n        reverse={checked}\n        onClick={() =\u003e {\n          setChecked(!checked);\n        }}\n        size={40}\n        wrapperStyle={{ marginTop: '5px' }}\n        animation={radioButton}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nAnimation wrapped in element (use render prop).\n```javascript\nexport const WrapperElement = () =\u003e {\n  return (\n    \u003cUseAnimation\n      animation={heart}\n      size={60}\n      onClick={() =\u003e {\n        // eslint-disable-next-line\n        console.log('additional onClick cb is working');\n      }}\n      render={(eventProps, animationProps) =\u003e (\n        \u003cbutton style={{ padding: '20px' }} type=\"button\" {...eventProps}\u003e\n          \u003cdiv {...animationProps} /\u003e\n        \u003c/button\u003e\n      )}\n    /\u003e\n  );\n};\n```\n Note that `eventProps` consists of `onClick`, `mouseOver` and other DOM events which you probably want to assign to your wrapping element (e.g. Button) and `animationProps` consist of an actual animation which you should spread inside a simple `\u003cdiv\u003e`   ","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FuseAnimations%2Freact-useanimations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FuseAnimations%2Freact-useanimations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FuseAnimations%2Freact-useanimations/lists"}