React Smooth Render

Mount & unmount react components visually smooth using React Fragments without leaving any footprints.

Demo: https://ferrousdesigner.github.io/react-smooth-render/

Props

| 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

Installation

npm install --save react-smooth-render

Usage

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;