react-only-when

1.0.2 • Public • Published

react-only-when

A declarative component for conditional rendering

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-only-when

Weekly Downloads

24,575

Version

1.0.2

License

MIT

Unpacked Size

20 kB

Total Files

6

Last publish

Collaborators

  • sag1v