{"id":22382348,"url":"https://github.com/jcoreio/react-fader","last_synced_at":"2025-07-31T03:31:42.921Z","repository":{"id":22210014,"uuid":"95604670","full_name":"jcoreio/react-fader","owner":"jcoreio","description":"sequential fade-out, fade-in component, with optional height/width animation.  Works with react-router","archived":false,"fork":false,"pushed_at":"2025-05-29T15:30:07.000Z","size":2960,"stargazers_count":20,"open_issues_count":35,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-02T14:16:27.809Z","etag":null,"topics":["animation","fades","react-component","transition"],"latest_commit_sha":null,"homepage":"https://jcoreio.github.com/react-fader/index.html","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/jcoreio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-06-27T22:03:51.000Z","updated_at":"2025-05-29T15:27:27.000Z","dependencies_parsed_at":"2024-06-18T21:34:56.574Z","dependency_job_id":"98f1013d-c92a-4cc9-a1ae-fc14f199e9b5","html_url":"https://github.com/jcoreio/react-fader","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/jcoreio/react-fader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-fader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-fader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-fader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-fader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/react-fader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-fader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267983365,"owners_count":24176058,"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-07-31T02:00:08.723Z","response_time":66,"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":["animation","fades","react-component","transition"],"created_at":"2024-12-05T00:12:36.403Z","updated_at":"2025-07-31T03:31:42.589Z","avatar_url":"https://github.com/jcoreio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-fader\n\n[![CircleCI](https://circleci.com/gh/jcoreio/react-fader.svg?style=svg)](https://circleci.com/gh/jcoreio/react-fader)\n[![Coverage Status](https://codecov.io/gh/jcoreio/react-fader/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/react-fader)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![npm version](https://badge.fury.io/js/react-fader.svg)](https://badge.fury.io/js/react-fader)\n\nA React Component that fades out its old child, then fades in its new child when its children change.\nIt can also optionally animate its height and/or width from one child's size to the other.\nWorks well with `react-router`!\n\n## Usage\n\n```sh\nnpm install --save react-fader\n```\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Fader from 'react-fader'\n\nReactDOM.render(\n  \u003cFader\u003e\n    \u003ch3\u003eFoo\u003c/h3\u003e\n  \u003c/Fader\u003e,\n  document.getElementById('root')\n)\n\n// Just change its children to something !==, and it will perform a fade transition.\n\nReactDOM.render(\n  \u003cFader\u003e\n    \u003ch3\u003eBar\u003c/h3\u003e\n  \u003c/Fader\u003e,\n  document.getElementById('root')\n)\n```\n\n## Transitioning between child routes with `react-router` version 4\n\nWhile it can be done with `\u003cSwitch\u003e`, I recommend using\n[`react-router-transition-switch`](https://github.com/jcoreio/react-router-transition-switch) instead:\n\n```js\nimport {Route, BrowserRouter as Router} from 'react-router-dom'\nimport TransitionSwitch from 'react-router-transition-switch'\nimport Fader from 'react-fader'\n\n\u003cRouter\u003e\n  \u003cTransitionSwitch component={Fader}\u003e\n    \u003cRoute path=\"/red\" component={Red}/\u003e\n    \u003cRoute path=\"/green\" component={Green} /\u003e\n    \u003cRoute path=\"/blue\" component={Blue} /\u003e\n  \u003c/TransitionSwitch\u003e\n\u003cRouter\u003e\n```\n\n## Props\n\n##### `animateHeight: boolean` (default: `true`)\n\nIf truthy, `Fader` will animate its height to match the height of its children.\n\n##### `animateWidth: boolean` (default: `true`)\n\nIf truthy, `Fader` will animate its width to match the height of its children.\n\n##### `shouldTransition: (oldChildren: any, newChildren: any) =\u003e boolean` (default: compares keys)\n\nAllows you to determine whether `Fader` should perform a transition from `oldChildren` to `newChildren`. By default,\nit returns true if `oldChildren !== newChildren` or their keys are not equal.\n\n##### `fadeOutTransitionDuration: number` (default: `200`)\n\nThe duration of the fade out transition, in milliseconds.\n\n##### `fadeOutTransitionTimingFunction: string` (default: `'ease'`)\n\nThe timing function for the fade out transition.\n\n##### `fadeInTransitionDuration: number` (default: `200`)\n\nThe duration of the fade in transition, in milliseconds.\n\n##### `fadeInTransitionTimingFunction: string` (default: `'ease'`)\n\nThe timing function for the fade in transition.\n\n##### `sizeTransitionDuration: number` (default: `200`)\n\nThe duration of the size transition, in milliseconds.\n\n##### `sizeTransitionTimingFunction: string` (default: `'ease'`)\n\nThe timing function for the size transition.\n\n##### `prefixer: Prefixer`\n\nIf given, overrides the `inline-style-prefixer` used to autoprefix inline styles.\n\n##### `className: string`\n\nAny extra class names to add to the root element.\n\n##### `style: Object`\n\nExtra inline styles to add to the root element.\n\n##### `viewStyle: Object`\n\nExtra inline styles to add to the view wrapper elements.\n\n##### `innerViewWrapperStyle: Object`\n\nExtra inline styles to add to the inner div between the `viewStyle` div and your\nview content element. (The inner div was added to ensure perfect height\nanimation.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-fader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Freact-fader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-fader/lists"}