rf

react-fadethrough

A react module that fades through it's children one by one.

Showing:

Popularity

Downloads/wk

24

GitHub Stars

4

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

1.3KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-fadethrough

A simple react module that will wrap and fade through it's children one by one. Example: http://sunyang713.github.io/react-fadethrough

Installation

npm install --save react-fadethrough

Usage

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>

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100