{"id":21822693,"url":"https://github.com/unirakun/hoc-react-animate","last_synced_at":"2026-03-27T02:11:33.274Z","repository":{"id":57264761,"uuid":"65829061","full_name":"unirakun/hoc-react-animate","owner":"unirakun","description":"Add a CSS class whenever a props change (or/and at mount)","archived":false,"fork":false,"pushed_at":"2020-02-05T15:17:38.000Z","size":288,"stargazers_count":14,"open_issues_count":4,"forks_count":3,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-08-16T12:43:13.816Z","etag":null,"topics":["animate","hoc","nantes","react","zenika"],"latest_commit_sha":null,"homepage":"https://unirakun.github.io/hoc-react-animate/","language":"JavaScript","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/unirakun.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":"2016-08-16T14:54:46.000Z","updated_at":"2020-02-05T15:17:40.000Z","dependencies_parsed_at":"2022-08-25T02:52:17.780Z","dependency_job_id":null,"html_url":"https://github.com/unirakun/hoc-react-animate","commit_stats":null,"previous_names":["zenika/react-animate","zennante5/react-animate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/unirakun/hoc-react-animate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unirakun%2Fhoc-react-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unirakun%2Fhoc-react-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unirakun%2Fhoc-react-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unirakun%2Fhoc-react-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unirakun","download_url":"https://codeload.github.com/unirakun/hoc-react-animate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unirakun%2Fhoc-react-animate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272280313,"owners_count":24906111,"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","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animate","hoc","nantes","react","zenika"],"created_at":"2024-11-27T17:16:54.844Z","updated_at":"2026-03-27T02:11:28.247Z","avatar_url":"https://github.com/unirakun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hoc-react-animate\n\n## what is this?\nThis is a higher order component (\"HOC\") that adds a CSS class to its child component whenever a prop change or at mount (or both) to animate it.\n\n## try it\nYou can test some examples [here](https://react-animate.firebaseapp.com/).\n\n## install\n`npm i --save hoc-react-animate`\n\n## use\nYou have to wrap your component, and give some informations:\n\nParameter | Required | Default value | Description\n----------|--------|---------------|-------------\n`watchedProps` | no | `[]` | The props to watch (they are compared with `lodash.isEqual`)\n`timeout` | no | `1000` | The time (in ms) for which the CSS class is applied to the wrapped component\n`className` | no | `'animate'` | The class to add when a prop changes (or at mount)\n`atMount` | no | `false` | Set to `true` if you want to animate the component at mount\n\n**Component.js**\n```(javascript)\nimport React, { PropTypes } from 'react'\nimport animate from 'hoc-react-animate'\n\nconst Component = ({ className, text }) =\u003e {\n  return (\n    \u003cdiv\n      className={`component ${className}`}\n    \u003e\n      {text}\n    \u003c/div\u003e\n  )\n}\n\nComponent.propTypes = {\n  className: PropTypes.string,\n  text: PropTypes.string,\n}\n\nexport default animate(\n  Component,\n  {\n    watchedProps: ['text'],\n    timeout: 200,\n  }\n)\n```\n\n**css**\n```(css)\n.component {\n  transition: all .2s;\n}\n.component.animate {\n  transform: scale(2);\n}\n```\n\n# About uni rakun\n**uni rakun** is created by two passionate french developers.\n\nDo you want to contact them ? Go to their [website](https://unirakun.fr)\n\n\u003ctable border=\"0\"\u003e\n \u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/26094222?s=460\u0026v=4\" width=\"100\" /\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/17828231?s=460\u0026v=4\" width=\"100\" /\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/guillaumecrespel\"\u003eGuillaume CRESPEL\u003c/a\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/fabienjuif\"\u003eFabien JUIF\u003c/a\u003e\u003c/td\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funirakun%2Fhoc-react-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funirakun%2Fhoc-react-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funirakun%2Fhoc-react-animate/lists"}