ninetysix/react-conditional

A package that allows easy and readable conditional statements in React.

React Conditional

A package that allows easy and readable conditional statements in React. No more bloated ternary operators!

Getting Started

Inside of your project run npm install --save @ninetysix/react-conditional to install the package.

Prerequisites

• node
• npm
• React

Installing

Installation is as simple as cd'ing into your projects folder and running npm install. No configuration is needed.

$ cd /myproject/
$ npm install --save @ninetysix/react-conditional

Initializing

At the top of the files which you want to use the conditional package in, be sure to import it.

import Conditional from '@ninetysix/react-conditional';

Usage

The conditional component will only show if it meets the criteria which is determined from inside the if prop. This prop must be a boolean.

render() {
    return (
        <Conditional if={this.props.posts.length}>
            // Render some posts!
        </Conditional>
        
        <Conditional if={!this.props.posts.length}>
            // I will not render.
        </Conditional>
    )
}

Props

Prop	Description	Type	Default	Required
if	Determines whether or not the component should be shown on screen or not.	boolean	undefined	true