Have ideas to improve npm?Join in the discussion! »

    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

    Keywords

    none

    Install

    npm i react-only-when

    DownloadsWeekly Downloads

    14,626

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    20 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar