react-fade
Simple fades in React
npm i react-fade
Fade in
Children components will start invisible and fade into a visible state.
<Fade> <p>I am so faded</p></Fade>
Fade out
Fade out requires some extra code to stay invisble after it's been faded-out. Right now, the recommended way of using <Fade out/>
is to utilize the duration property in conjuction with css display or visibilty. For example:
const fadeDuration = 10 state = fadeOut: false visibility: 'visible' { if fadeOut } { return <div> <Fade out=thisstatefadeOut duration=fadeDuration style= visibility: thisstatevisibility > <p>I am so faded</p> </Fade> <button onClick= this> Fade out </button> </div> }
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 |