A simple react module that will wrap and fade through it's children one by one. Example: http://sunyang713.github.io/react-fadethrough
npm install --save react-fadethrough
Wrap elements of any kind inside an enclosing Fadethrough component. The Fadethrough will iterate over and fade-transition through the components. The Fadethrough comopnent can take an optional width, optional height, or optional interval period.
Props
- width: a string equivalent to the CSS height property. Default: '100%'.
- height: a string equivalent to the CSS height property. Default: '100%'.
- interval: a number representing the interval time in milliseconds between each element. Default: 3000.
import Fadethrough from 'react-fadethrough'
/* . . . */
// in your render function
<Fadethrough width={ '800px' } height={ '400px' } interval={ 5000 }>
<img src={ one } width="800" height="400" />
<img src={ two } width="800" height="400" />
<img src={ three } width="800" height="400" />
</Fadethrough>Fadethrough can handle any kind of child component.
import Fadethrough from 'react-fadethrough'
/* . . . */
// in your render function
<FadeThrough>
<h1>{ 'hello!' }</h1>
<div style={ { backgroundImage: 'url(' + myImage + ')' } } />
<p>{ 'test test test test' }</p>
<p>{ 'test 123' }</p>
<img src={ three } width="800" height="400" />
</FadeThrough>MIT