React Conditional Rendering Component - Show

Overview

The Show component is a versatile conditional rendering utility for React applications. It simplifies the process of rendering components based on a provided condition. This component provides an intuitive way to manage conditional logic within your React components, making your code cleaner and more readable.

Installation

You can install the Show component via npm:

npm i react-if-else-component

Usage

const Wrapper = () => {
    const number = 1;
    return (
       <Show>
        <Show.When isTrue={number === 1}>
            <h1>Hi Bro...</>
        </Show.When>
        <Show.Else>
            <h1>By Bro...</h1>
        </Show.Else>
       </Show>
    )
};

API

Show Component Props

children: Accepts Show.When and Show.Else components.

Show.When Component Props

isTrue: The condition to be evaluated. If true, the component's children will be rendered.

Show.Else Component Props

render: (Optional) A custom component to render when the condition in the corresponding Show.When component is false.

children: (Optional) A shorthand for providing content to be rendered when the condition is false. If render is also provided, it takes precedence.

License

This project is licensed under the MIT License - see the LICENSE file for details.