conditional-react-component v1.0.3

Conditional React Component

Render react components conditionally.

Install

NPM:

npm install conditional-react-component

Bower:

bower install conditional-react-component

Example

import React from 'react'
import { Conditional, If, Else } from 'conditional-react-component'

class NumberText extends React.Component {
    render() {
        return (
            <div>
                <Conditional>
                    <If condition={ this.props.value < 0 }>
                        <span>Negative</span>
                    </If>
                    <If condition={ this.props.value > 0 }>
                        <span>Positive</span>
                    </If>
                    <Else>
                       <span>Zero</span>
                    </Else>
                </If>
            </div>
        );
    }
})

import React from 'react'
import { Conditional, If, Else } from 'conditional-react-component'

class PositiveNumberText extends React.Component {
    render() {
        return (
            <div>
                <If condition={ this.props.value > 0 }>
                    <span>Positive</span>
                </If>
            </div>
        );
    }
})

API

<Conditional />

The parent container element

<If />

If condition evaluates to true, then <If /> block will be rendered, otherwise the <Else /> block will be rendered.

This component can contain multiple number of <If /> blocks, the first block that evaluates to true will be rendered. If no <If /> block evaluates to true, then <Else /> block will be rendered.

Must contain only a single child, which it renders as-is. Should not be used outside of a <Conditional /> block.

<Else />

Must only contain a single child, which it renders as-is. Can be used outside of a <Conditional /> block.

License

Conditional React Component is released under the MIT license.