https://github.com/bentatum/react-fade
Simple fades in React
https://github.com/bentatum/react-fade
Last synced: 5 months ago
JSON representation
Simple fades in React
- Host: GitHub
- URL: https://github.com/bentatum/react-fade
- Owner: bentatum
- Created: 2016-05-22T23:19:23.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-12T23:03:47.000Z (almost 9 years ago)
- Last Synced: 2024-11-11T19:21:08.729Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 10
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![npm][npm-image]][npm-url]
[![travis][travis-image]][travis-url]
[![standard][standard-image]][standard-url]
[npm-image]: https://img.shields.io/npm/v/react-fade.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-fade
[travis-image]: https://img.shields.io/travis/bentatum/react-fade.svg?style=flat-square
[travis-url]: https://travis-ci.org/bentatum/react-fade
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: http://npm.im/standard
# react-fade
Simple fades in React
`npm i react-fade`
## Fade in
Children components will start invisible and fade into a visible state.
```js
I am so faded
```
## Fade out
Fade out requires some extra code to stay invisble after it's been faded-out. Right now, the recommended way of using `` is to utilize the *duration* property in conjuction with css display or visibilty. For example:
```js
import { default as React, Component } from 'react'
import { default as Fade } from 'react-fade'
const fadeDuration = 10
class FadeExample extends Component {
state = {
fadeOut: false,
visibility: 'visible'
}
componentDidUpdate(nextProps, { fadeOut }) {
if (fadeOut) {
setTimeout(() => {
this.setState({
visibility: 'hidden'
})
}, fadeDuration)
}
}
render() {
return (
I am so faded
this.setState({ fadeOut: true })}>
Fade out
)
}
}
```
### Props
| Prop | Type | Description |
| :------------ | :------------------------ | :---------------------------------------------------------------------- |
| out | bool | fades out instead of in - see instructions for usage patterns |
| duration | number | the amount of time in seconds that it takes to fade in or out |