react-only-when

A declarative component for conditional rendering

Install

npm install --save react-only-when

Usage

import Only from 'react-only-when'

<Only when={true}>
  <h1>Here I Am</h1>
</Only>

Full Example

import React from 'react';
import Only from 'react-only-when'

class App extends React.Component {
  state = {
    show: true
  };

  toggle = () => this.setState(state => ({ show: !state.show }));

  render() {
    const { show } = this.state;
    return (
      <div className="app">
        <button onClick={this.toggle}>Toggle</button>
        <Only when={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