0.0.11 • Published 7 years ago

react-if-comp v0.0.11

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

React IF component

npm version Build Status Dependency Status devDependency Status

React component for conditional rendering.

Description

In React component code you can often deal with construction like this (example from here):

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
);

With help of React IF component you can replace it with:

return (
  <nav>
    <Home />
    <Node if={loggedIn}>
      <Node then><LogoutButton /></Node>
      <Node else><LoginButton /></Node>
    </Node>
  </nav>
);
// or
return (
  <nav>
    <Home />
    <Node if={loggedIn} then={LogoutButton} else={LoginButton} />
  </nav>
);

Install

  • NPM
$ npm install --save react-if-comp

Usage

Simple example of react-if-component usage you can find here https://jsfiddle.net/gfdev/s2hahzru/

var React = require('react')
  , ReactDOM = require('react-dom')
  , Node = require('react-if-comp')
;

var Bar = React.createClass({
    render: function() {
        return (
            <b>Bar</b>
        );
    }
});

var Foo = React.createClass({
    render: function() {
        return (
            <b>Foo</b>
        );
    }
});

var Index = React.createClass({
    render: function() {
        return (
            <div>
              <Node if={true} then='true' />
              <Node if={true} then={1+1} />
              <Node if={true} then={Bar} />
              <Node if={true} then={<Bar prop='test' />} />
              <Node if={true} then={function() { return 'test'; }} />

              <Node if={true} then='true' else='false' />
              <Node if={false} then='true' else='false' />

              <Node if={true} then={1+1} else={0+0} />
              <Node if={false} then={1+1} else={0+0} />

              <Node if={true} then={Bar} else={Foo} />
              <Node if={false} then={Bar} else={Foo} />

              <Node if={true} then={<Bar one='1' two='2' />} else={<Foo one='1' two='2' />} />
              <Node if={false} then={<Bar one='1' two='2' />} else={<Foo one='1' two='2' />} />

              <Node if={true}>
                <b>true</b>
              </Node>

              <Node if={false}>
                <Node else><b>false</b></Node>
              </Node>

              <Node if={true}>
                <Node then><b>true</b></Node>
                <Node else><b>false</b></Node>
              </Node>

              <Node if={true}>
                <i>begin</i>
                <Node then><b>true</b></Node>
                <Node else><b>false</b></Node>
                <i>end</i>
              </Node>

              <Node if={true}>
                <b>true</b>
                <Node if={true} then='true' />
              </Node>
            </div>
        );
    }
});

ReactDOM.render(<Index />, document.getElementById('body'));

License

react-if-component is released under the MIT license.

0.0.11

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago