Nutella with Pepperoni and Mushrooms

    react-if-component

    0.0.1 • Public • Published

    React If Component npm badge

    Render React components conditionally.

    This component helps you turn this

    render: function() {
        return (
            <div>
                <Header />
                {this.renderBody()}
                </Footer>
            </div>
        );
    },
     
    renderBody: function() {
     return (this.props.age >= this.props.drinkingAge)
        ? <span class="ok">Have a beer, {this.props.name}!</span>
        : <span class="not-ok">Sorry {this.props.name } you are not old enough.</span>;
    }

    into this

    render: function() {
        return (
            <div>
                <Header />
                <If when={ this.props.age >= this.props.drinkingAge }>
                    <Then><span class="ok">Have a beer, {this.props.name}!</span></Then>
                    <Else><span class="not-ok">Sorry {this.props.name}, you are not old enough.</span></Else>
                </If>
                </Footer>
            </div>
        );
    }

    Caveats

    With this approach to conditional elements, children of either branch will always be evaluated no matter what. This can be an issue eg. if you're testing an object for nullity, and then try to access one of its property inside of the Then branch. See this StackOverflow discussion as well as issue #1 for more informations.

    Install

    NPM:

    npm install react-if-component
    

    Example

    // Browserify:
    var If = require('react-if');
     
    // Otherwise
    var If = ReactIf;
    var Stage1 = React.createClass({
        render: function() {
          return (<div>Stage1</div>);
        }
    });
     
    var Stage2 = React.createClass({
        render: function() {
          return (<div>Stage2</div>);
        }
    });
     
    var Beer = React.createClass({
     
        getInitialState: function() {
          return {
            stage: true
          };
        },
     
        changeStage() {
          this.setState({ stage: !this.state.stage })
        },
     
        render: function() {
          return (
            <div id="some-id">
              <button onClick={ this.changeStage }>Change Stage</button>
              <If when={ this.state.stage }>
                <Stage1 />
              </If>
              <If when={ !this.state.stage }>
                <Stage2 />
              </If>
            </div>
          )
        }
     
    });
     
    React.renderComponent(
        <Beer />,
        document.getElementById('example')
    );

    API

    <If />

    Property Type
    when Boolean

    If when evaluates to true, renders the children block will be rendered, otherwise renders the null block.

    License

    React If Component is released under the MIT license.

    Install

    npm i react-if-component

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • stigmat4j