# react-fader
> component that fades out old children, then fades in new children when its children change
Latest version **3.3.0** (published 2025-05-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-fader
pnpm add react-fader
yarn add react-fader
bun add react-fader
```
## Health
**Score 35/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.3.0 |
| Published | 2025-05-29 |
| First published | 2017-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 5 |
| Unpacked size | 51.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Andy Edwards |
| Maintainers | jedwards1211 |
| Keywords | react, animation, transition, fade |
## Links
- npm: https://www.npmjs.com/package/react-fader
- Repository: https://github.com/jcoreio/react-fader
- Homepage: https://github.com/jcoreio/react-fader#readme
- Issues: https://github.com/jcoreio/react-fader/issues
- npm.io page: https://npm.io/package/react-fader
## Dependencies (5)
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.6
- [inline-style-prefixer](https://npm.io/package/inline-style-prefixer.md) ^3.0.6
- [react-transition-context](https://npm.io/package/react-transition-context.md) ^5.1.2
- [@jcoreio/toolchain-semantic-release](https://npm.io/package/@jcoreio/toolchain-semantic-release.md) ^3.4.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.3.0 (latest) — 2025-05-29
- 3.2.0 — 2024-03-04
- 3.1.1 — 2019-12-06
- 3.1.0 — 2019-05-07
- 3.0.1 — 2019-05-07
- 3.0.0 — 2019-04-16
- 2.0.3 — 2018-01-16
- 2.0.2 — 2017-12-28
- 2.0.1 — 2017-11-29
- 2.0.0 — 2017-11-28
- 1.1.5 — 2017-11-28
- 1.1.4 — 2017-09-15
- 1.1.3 — 2017-09-11
- 1.1.2 — 2017-07-13
- 1.1.1 — 2017-07-13
- … 2 more at https://npm.io/package/react-fader/versions
## README
# react-fader
[](https://circleci.com/gh/jcoreio/react-fader)
[](https://codecov.io/gh/jcoreio/react-fader)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/react-fader)
A React Component that fades out its old child, then fades in its new child when its children change.
It can also optionally animate its height and/or width from one child's size to the other.
Works well with `react-router`!
## Usage
```sh
npm install --save react-fader
```
```js
import React from 'react'
import ReactDOM from 'react-dom'
import Fader from 'react-fader'
ReactDOM.render(
Foo
,
document.getElementById('root')
)
// Just change its children to something !==, and it will perform a fade transition.
ReactDOM.render(
Bar
,
document.getElementById('root')
)
```
## Transitioning between child routes with `react-router` version 4
While it can be done with ``, I recommend using
[`react-router-transition-switch`](https://github.com/jcoreio/react-router-transition-switch) instead:
```js
import {Route, BrowserRouter as Router} from 'react-router-dom'
import TransitionSwitch from 'react-router-transition-switch'
import Fader from 'react-fader'
```
## Props
##### `animateHeight: boolean` (default: `true`)
If truthy, `Fader` will animate its height to match the height of its children.
##### `animateWidth: boolean` (default: `true`)
If truthy, `Fader` will animate its width to match the height of its children.
##### `shouldTransition: (oldChildren: any, newChildren: any) => boolean` (default: compares keys)
Allows you to determine whether `Fader` should perform a transition from `oldChildren` to `newChildren`. By default,
it returns true if `oldChildren !== newChildren` or their keys are not equal.
##### `fadeOutTransitionDuration: number` (default: `200`)
The duration of the fade out transition, in milliseconds.
##### `fadeOutTransitionTimingFunction: string` (default: `'ease'`)
The timing function for the fade out transition.
##### `fadeInTransitionDuration: number` (default: `200`)
The duration of the fade in transition, in milliseconds.
##### `fadeInTransitionTimingFunction: string` (default: `'ease'`)
The timing function for the fade in transition.
##### `sizeTransitionDuration: number` (default: `200`)
The duration of the size transition, in milliseconds.
##### `sizeTransitionTimingFunction: string` (default: `'ease'`)
The timing function for the size transition.
##### `prefixer: Prefixer`
If given, overrides the `inline-style-prefixer` used to autoprefix inline styles.
##### `className: string`
Any extra class names to add to the root element.
##### `style: Object`
Extra inline styles to add to the root element.
##### `viewStyle: Object`
Extra inline styles to add to the view wrapper elements.
##### `innerViewWrapperStyle: Object`
Extra inline styles to add to the inner div between the `viewStyle` div and your
view content element. (The inner div was added to ensure perfect height
animation.)
---
_Source: https://npm.io/package/react-fader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._