React Conditional Rendering

React-Conditional-Rendering is a React based utitly that helps you do conditional renderings in components.

• Do npm install react-conditional-rendering
• Import a component you need
• See magic

Installation

Install the dependencies and devDependencies and start the server.

$ cd porject
$ npm install react-conditional-rendering
$ npm start

Usage

import React from 'react';
import { RenderIf, RenderComponent } from 'react-conditional-rendering';
 
export default class extends React.Component {
    state = { buttonPressed: false, renderDummyComponent: false };
 
    dummyComponent = () => (
        <div
            style={{
                height: 100,
                width: 100,
                backgroundColor: 'yellow',
                overflow: 'hidden',
            }}
        >
            <p>This component only render if the render component is checked</p>
        </div>
    );
 
    render() {
        const { buttonPressed = false, renderDummyComponent = false } = this.state;
        return (
            <div>
                <RenderIf condition={buttonPressed}>
                    <div style={{ height: 100, width: 100, backgroundColor: 'red' }}>
                        Rendering with children
                    </div>
                </RenderIf>
                <RenderComponent
                    condition={renderDummyComponent}
                    component={this.dummyComponent}
                />
                <button
                    onClick={() => this.setState({ buttonPressed: !buttonPressed })}
                >
                    First Example
                </button>
                <button
                    onClick={() =>
                        this.setState({ renderDummyComponent: !renderDummyComponent })
                    }
                >
                    Second Example
                </button>
            </div>
        );
    }
}