react-simple-conditional

Conditional render component for React and React Native

This simple conditional components only renders its children if the condition prop has a value that is true or truthy in JavaScript. If the condition prop has a value that interpretes as false, nothing (null) will be rendered.

The component renders nothing by itself, it uses React Fragments . All the props and children that you supply to the component gets passed to the div.

Usage:

To istall the component simply run:

npm install --save react-simple-conditional

Import it using:

import Conditional from 'react-simple-conditional'

Use it in JSX:

    <Conditional condition={someCondition}>
        <p>This will be rendered if 'someCondition' is true</p>
    </Conditional>

Full Example:

    import React, { Component } from 'react';
    import Conditional from 'react-simple-conditional';
    class App extends Component {
        state={
            renderCondition:true
        }
    render() {
        return (
            <Conditional 
            condition={this.state.renderCondition}>
                <h1>Hello World</h1>
            </Conditional>
        );
    }
    }
 
    export default App;

License:

This project is distributed under the MIT License