React JSX utility components for clean and efficient conditional and iterative rendering. Simplifies rendering logic with components like Ternary, Show, and SwitchCase.
npm install react-jsx-controlreact-jsx-control is a utility library designed to simplify conditional rendering and looping in React applications. It provides a set of reusable components to make JSX cleaner and more readable.
---
``bash`
npm install react-jsx-control
yarn add react-jsx-control
pnpm add react-jsx-control
1. Ternary
The Ternary component renders one of two ReactNodes (truthy or falsy) based on a condition.
`tsx
import { Ternary } from 'react-jsx-control';
truthy={Truthy}
falsy={Falsy}
/>
`
2. SwitchCase
The SwitchCase component renders a specific child based on a match value.
`tsx
import { SwitchCase } from 'react-jsx-control';
caseBy={{
a:
3. Switch
The Switch component renders the first child whose when prop evaluates to true.
tsx
import { Switch, Match } from 'react-jsx-control';
Not rendered
Rendered
`4. Show
The Show component renders its children when the condition is true. Otherwise, it renders the fallback content.
tsx
import { Show } from 'react-jsx-control';Fallback
5. For
The For component loops through an array and renders ReactNodes for each item.
tsx
import { For } from 'react-jsx-control';const items = [
{ name: 'Item 1', value: 10 },
{ name: 'Item 2', value: 20 },
];
fallback={
No items available}
>
{({ name, value }, index) => (
{index + 1}. {name}
{value}
)}
;
`$3
- Ternary: Renders one of two ReactNodes based on a condition.
- SwitchCase: Renders based on a specific value.
- Switch: Renders the first matching child based on the condition.
- Show: Renders content or fallback based on a condition.
- For: Loops through an array and renders elements.
$3
- Improved readability of JSX code.
- Simplifies complex conditional rendering.
- Enhances React’s default conditional and iterative rendering patterns.$3
Contributions and bug reports are always welcome!
Feel free to visit the GitHub repository to get involved.
$3
MIT License.This is a fully markdown-ready file for your README. You can copy-paste this into your
README.md` without any modifications. 🚀