React Smart Conditional

A flexible and reusable React component for conditional rendering.

Features

- Conditional rendering of content based on boolean conditions
- Support for multiple conditions with If components
- Fallback rendering with Else component
- Option to render single or multiple true conditions
- Polymorphic component API for flexible element rendering

Table of Contents

- Installation
- Usage
- API Reference
- Contributing
- License

Installation

``bash
pnpm install react-smart-conditional
`

Usage

$3

The following example demonstrates the traditional way of conditional rendering in React using ternary operators and logical AND operators. While functional, this approach can become difficult to read and maintain as the number of conditions increases.

`jsx
import React from 'react';

const DataDisplay = ({ isLoading, error, data }) => {
return (


{JSON.stringify(data, null, 2)}

export default DataDisplay;
`

$3

This example showcases the same component using the react-smart-conditional library. The Show component and its child components (If, and Else) provide a more declarative and readable approach to conditional rendering, especially for complex scenarios.

`jsx
import React from 'react';
import { Show } from 'react-smart-conditional';

const DataDisplay = ({ isLoading, error, data }) => {
return (

Loading...
Error: {error.message}



Data Loaded:

{JSON.stringify(data, null, 2)}

export default DataDisplay;
`

$3

To render all true conditions, use the multiple prop:

`jsx

Content for condition 1
Content for condition 2
Fallback content

`

This will render both condition1 and condition2 if they are true.

API

1. Show - Main container for conditional rendering

- Props:
- multiple: boolean (default: false) - When true, renders all true conditions. When false, renders only the first true condition.
- as?: string | React.ComponentType - Wrapper element/component (optional, default: React.Fragment)
- children: React.ReactNode - Should contain If, ElseIf, and Else components.

2. Show.If - Renders children when condition is true

- Props:
- as?: string | React.ComponentType - Wrapper element/component (optional, default: div)
- condition: boolean - Condition to evaluate (required)
- children: React.ReactNode - Content to render if true

3. Show.Else - Renders when all previous conditions were false
- Props:
- as?: string | React.ComponentType - Wrapper element/component (optional, default: div)
- children: React.ReactNode - Content to render

Polymorphic API

The Show, Show.If, and Show.Else components support polymorphic rendering:

`jsx

condition={true}
as="p"
className="content active"
onClick={() => console.log('Clicked')}
>
Paragraph content

condition={false}
as="div"
className="content inactive"
style={{ display: 'none' }}
>
Hidden content


Span content


`

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

If you find this project helpful, please consider giving it a star on GitHub! ⭐️

License

Distributed under the MIT License. See LICENSE` for more information.

Contact

Made with ❤️ Wilson Adenuga - @Adenugawilson - oluwatunmiseadenuga@gmail.com

Project Link: https://github.com/oluwatunmiisheii/react-smart-conditional