Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcoreio/react-fader
sequential fade-out, fade-in component, with optional height/width animation. Works with react-router
https://github.com/jcoreio/react-fader
animation fades react-component transition
Last synced: 18 days ago
JSON representation
sequential fade-out, fade-in component, with optional height/width animation. Works with react-router
- Host: GitHub
- URL: https://github.com/jcoreio/react-fader
- Owner: jcoreio
- License: mit
- Created: 2017-06-27T22:03:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-04T23:16:07.000Z (10 months ago)
- Last Synced: 2024-12-03T09:43:07.155Z (19 days ago)
- Topics: animation, fades, react-component, transition
- Language: TypeScript
- Homepage: https://jcoreio.github.com/react-fader/index.html
- Size: 2.82 MB
- Stars: 21
- Watchers: 4
- Forks: 3
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
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.)