react-chousy

A lightweight React utility for cleaner, more readable conditional rendering and list mapping in JSX.

react-chousy

A lightweight React utility for cleaner, more readable conditional rendering and list mapping in JSX.

Features

  • Intuitive JSX syntax for conditionals and switch-cases
  • Type-safe with TypeScript
  • Tree-shakable and lightweight (~300 bytes gzipped)
  • Works with any React component
  • Declarative list rendering with selection and highlighting helpers

Installation

npm install react-chousy

Usage

ConditionalRender

import { ConditionalRender } from 'react-chousy';

<ConditionalRender condition={isLoggedIn}>
  {{
    true: <p>Welcome, hero 🦸!</p>,
    false: <p>Access denied! 🚫 Please log in.</p>
  }}
</ConditionalRender>

Nesting Example

<ConditionalRender condition={isLoggedIn}>
  {{
    true: (
      <ConditionalRender condition={hasProfile}>
        {{
          true: <p>Welcome to your profile 👤</p>,
          false: <p>Finish setting up your profile ✍️</p>
        }}
      </ConditionalRender>
    ),
    false: <p>Please log in to continue 👋</p>
  }}
</ConditionalRender>

API:

PropTypeDescription
conditionbooleanThe condition to evaluate
childrenobject{ true, false } JSX content

SwitchCaseRender

import { SwitchCaseRender } from 'react-chousy';

<SwitchCaseRender value={status}>
  {{
    idle: <p>Waiting...</p>,
    loading: <p>Loading...</p>,
    success: <p>✅ Success!</p>,
    error: <p>❌ Error</p>,
    default: <p>Unknown status</p>
  }}
</SwitchCaseRender>

API:

PropTypeDescription
valuestring | numberThe value to match
childrenobjectKeys that match the value + optional default

ChousyEach

import { ChousyEach } from 'react-chousy';

const fruits = ['🍎', '🍌', '🍇'];

<ChousyEach of={fruits}>
  {(fruit, idx) => (
    <span>{fruit}</span>
  )}
</ChousyEach>

With selection state

<ChousyEach of={fruits} trackSelection>
  {(fruit, idx, { selectedIdx, setSelectedIdx }) => (
    <button
      className={selectedIdx === idx ? 'font-bold text-blue-600' : 'text-gray-700'}
      onClick={() => setSelectedIdx(idx)}
    >
      {fruit}
    </button>
  )}
</ChousyEach>

const menu = [
  { label: 'Home', path: '/' },
  { label: 'About', path: '/about' },
  { label: 'Contact', path: '/contact' },
];
const currentPath = '/about';

<ChousyEach
  of={menu}
  navHighlight
  getPath={item => item.path}
  currentPath={currentPath}
>
  {(item, idx, { isActive }) => (
    <a
      href={item.path}
      className={isActive ? 'text-blue-600 font-bold' : 'text-gray-700'}
    >
      {item.label}
    </a>
  )}
</ChousyEach>

API:

PropTypeDescription
ofarrayArray of items to render
childrenfunctionRender function for each item. Helpers for selection/highlight
classNamestringOptional Tailwind classes for the <ul>
onChangefunctionOptional effect callback when list changes
trackSelectionbooleanIf true, exposes selectedIdx and setSelectedIdx to children
navHighlightbooleanIf true, highlights the item whose path matches currentPath
getPathfunctionFunction to extract the path from each item
currentPathstringThe current path to match for highlighting

For more details, see the react-chousy npm page or GitHub repo.