2.0.1 • Published 7 years ago

react-fadethrough v2.0.1

Weekly downloads
7
License
MIT
Repository
github
Last release
7 years ago

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

2.0.1

7 years ago

2.0.0

8 years ago

1.3.4

9 years ago

1.3.3

9 years ago

1.3.2

9 years ago

1.3.1

9 years ago

1.3.0

9 years ago

1.2.2

9 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.9

10 years ago

1.1.8

10 years ago

1.1.7

10 years ago

1.1.6

10 years ago

1.1.5

10 years ago

1.1.4

10 years ago

1.1.3

10 years ago

1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.0

10 years ago