Skip to content

A declarative component for conditional rendering

Notifications You must be signed in to change notification settings

aarowman/react-only-when

 
 

Repository files navigation

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

About

A declarative component for conditional rendering

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.5%
  • CSS 6.5%
  • HTML 5.0%