ChousyEach
ChousyEach is a declarative, flexible way to render lists in React, inspired by Ruby/Rails' each. It supports selection state, highlighting, and more.
Basic Usage
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>
Navbar highlighting
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>
ChousyEach API
| Prop | Type | Description |
|---|---|---|
| of | array | Array of items to render |
| children | function | Render function for each item. Helpers for selection/highlight |
| className | string | Optional Tailwind classes for the <ul> |
| onChange | function | Optional effect callback when list changes |
| trackSelection | boolean | If true, exposes selectedIdx and setSelectedIdx to children |
| navHighlight | boolean | If true, highlights the item whose path matches currentPath |
| getPath | function | Function to extract the path from each item |
| currentPath | string | The current path to match for highlighting |