sag1v/react-only-when

Repository files navigation

A declarative component for conditional rendering

NPMJavaScript Style Guide

npm install --save react-only-when
import Only from 'react-only-when'

<Only when={true}>
  <h1>Here I Am</h1>
</Only>
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>
    );
  }
}

prop nametypedefaultisRequireddescription
childrenreact elementnulltrueA single child element
whenboolfalsetrueWhen true, children will rendered as is
hiddenModestring"withNull"falseDetermines how children should be hidden
classNamestring"r-o_hidden"falseThis is working in combination with hiddenMode={"withCss"}
hiddenModedescription
"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)

MIT © sag1v

About

A declarative component for conditional rendering

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published