{"id":23031626,"url":"https://github.com/asbjornh/react-tiny-transition","last_synced_at":"2025-08-14T15:31:48.487Z","repository":{"id":27229586,"uuid":"112951216","full_name":"asbjornh/react-tiny-transition","owner":"asbjornh","description":"Kind of like CSSTransitionGroup except without the \"group\" and very small.","archived":false,"fork":false,"pushed_at":"2022-05-02T19:43:55.000Z","size":370,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-08T14:08:25.000Z","etag":null,"topics":["animation","react","transition"],"latest_commit_sha":null,"homepage":null,"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/asbjornh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-12-03T18:09:38.000Z","updated_at":"2022-06-02T12:30:20.000Z","dependencies_parsed_at":"2022-08-08T05:15:15.169Z","dependency_job_id":null,"html_url":"https://github.com/asbjornh/react-tiny-transition","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbjornh%2Freact-tiny-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbjornh%2Freact-tiny-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbjornh%2Freact-tiny-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbjornh%2Freact-tiny-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asbjornh","download_url":"https://codeload.github.com/asbjornh/react-tiny-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229841024,"owners_count":18132559,"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","transition"],"created_at":"2024-12-15T15:39:47.099Z","updated_at":"2024-12-15T15:39:47.931Z","avatar_url":"https://github.com/asbjornh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TinyTransition\n\n[![npm version](https://img.shields.io/npm/v/react-tiny-transition.svg?style=flat)](https://www.npmjs.com/package/react-tiny-transition)\n\nThis component adds classnames to your component when it mounts/unmounts so that you can add css transitions to it. basically the same thing as CSSTransition from [react-transition-group](https://github.com/reactjs/react-transition-group), except smaller and without dependencies.\n\nThis component does not include any transition effects; you need to add your own. See example css below.\n\n### Browser support:\n\nTinyTransition needs `requestAnimationFrame` ([compatibility table](https://caniuse.com/#feat=requestanimationframe)) and `element.classList` ([compatibility table](https://caniuse.com/#feat=classlist)) in order to do its thing, so make sure to add polyfills if you need to support older browsers (like IE9 and below).\n\n### Other Tiny libraries\n\n- [react-tiny-crossfade](https://github.com/asbjornh/react-tiny-crossfade)\n- [react-tiny-collapse](https://github.com/asbjornh/react-tiny-collapse)\n\n### Install:\n\n```\nnpm install react-tiny-transition\n```\n\n## API:\n\n**duration** : Number = `500`\n\u003cbr/\u003eThe duration of your css transition (milliseconds)\n\n---\n\n**disableInitialAnimation** : Boolean = `false`\n\u003cbr/\u003eDisable the animation when TinyTransition mounts\n\n---\n\n**delay** : Number = `0`\n\u003cbr/\u003eDelay before adding classnames (milliseconds)\n\n---\n\n**children** : React element\n\u003cbr/\u003eSingle React element\n\n---\n\n**classNames**: Object\n\u003cbr/\u003eDefault:\n\n```js\n{\n\tbeforeEnter: \"before-enter\",\n\tentering: \"entering\",\n\tbeforeLeave: \"before-leave\",\n\tleaving: \"leaving\"\n}\n```\n\nClassnames to use when mounting / unmounting\n\n---\n\n## Basic example:\n\n```js\nimport TinyTransition from \"react-tiny-transition\";\n\n...\n\n\u003cTinyTransition duration={500}\u003e\n  {this.state.isVisible \u0026\u0026\n    \u003cMyComponent /\u003e\n  }\n\u003c/TinyTransition\u003e\n```\n\n## CSS example:\n\n```css\n.before-enter {\n  opacity: 0;\n}\n\n.entering {\n  transition: opacity 0.5s;\n  opacity: 1;\n}\n\n.before-leave {\n  transition: opacity 0.5s;\n}\n\n.leaving {\n  opacity: 0;\n}\n```\n\n## Multiple elements:\n\nIn order to keep TinyTransition as tiny as possible, one child only will get classnames applied. If you want transitions on lists of things, you could try [react-flip-move](https://github.com/joshwcomeau/react-flip-move) or [react-flip-motion](https://github.com/asbjornh/react-flip-motion).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasbjornh%2Freact-tiny-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasbjornh%2Freact-tiny-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasbjornh%2Freact-tiny-transition/lists"}