react-only-when

A declarative component for conditional rendering

Install

npm install --save react-only-when

Usage

importOnlyfrom'react-only-when'<Onlywhen={true}><h1>Here I Am</h1></Only>

Full Example

importReactfrom'react';importOnlyfrom'react-only-when'classAppextendsReact.Component{state={show: true};toggle=()=>this.setState(state=>({show: !state.show}));render(){const{ show }=this.state;return(<divclassName="app"><buttononClick={this.toggle}>Toggle</button><Onlywhen={show}><h1>Here I Am</h1></Only></div>);}}

---

props

prop name	type	default	isRequired	description
children	react element	null	true	A single child element
when	bool	false	true	When true, children will rendered as is
hiddenMode	string	"withNull"	false	Determines how children should be hidden
className	string	"r-o_hidden"	false	This is working in combination with hiddenMode={"withCss"}

hiddenMode enum

hiddenMode	description
"withNull"	Will not render the child
"withDisplay"	Will render the child with display:none
"withVisibility"	Will render the child with visibility:hidden
"withCss"	Will render the child with a CSS class (you can pass it a custom className prop)

---

License

MIT © sag1v