Mount & unmount react components visually smooth using React Fragments without leaving any footprints.
Demo: https://ferrousdesigner.github.io/react-smooth-render/
| Props | Type | Default Value | Description |
|---|---|---|---|
| hidden | Boolean(Required) | false | Describes the visibility of the component |
| initiallyHidden | Boolean | false | Describes the initial visibility of the component |
| timing | Number | 250 | Animation duration in milliseconds |
| children | Node(Required) | undefined |
npm install --save react-smooth-render
import SmoothRender from 'react-smooth-render';
class App extends Component {
state = {
hidden: false // State varible which is used to toggle the visibility on SmoothRender
}
render() {
const { hidden } = this.state
return (
<div>
{/* This button toggles the state */}
<button
onClick={() => this.setState({ hidden: !hidden })}>
Toggle
</button>
<SmoothRender hidden={hidden} timing={350}>
<h1>This will mount and unmount smoothly.</h1>
</SmoothRender>
</div>
);
}
}
export default App;