react-chousy/README.md

A simple React component for conditional rendering using JSX-friendly syntax.

<p align="center"><a href="https://react-chousy-doc.vercel.app/" target="_blank" rel="noopener noreferrer"><img width="400"
                                                                             src="./react-chousy.png"
                                                                             alt="react-chousy" /></a></p>
<p align="center">Lightweight <b>300B</b> utility for clean, modern React conditional rendering & expressive mapping</p>
<p align="center">
    <a href="https://bundlephobia.com/package/react-chousy"><img
            src="https://img.shields.io/bundlephobia/minzip/react-chousy?style=flat-square&color=%2345cc11"
            alt="Gzip Size"></a>
    <a href="https://www.npmjs.com/package/react-chousy"><img src="https://img.shields.io/npm/v/react-chousy.svg?style=flat-square&colorB=51C838"
                                                       alt="NPM Version"></a>
    <a href="https://github.com/joelnbl/react-chousy/actions/workflows/ci.yml"><img
            src="https://img.shields.io/github/actions/workflow/status/joelnbl/react-chousy/ci.yml?style=flat-square" alt="Build Status"></a>
    <a href="https://github.com/joelnbl/react-chousy/blob/main/LICENSE"><img
            src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="License"></a>
</p>

> react-chousy is a minimalist React library for clean, readable conditional rendering and expressive list mapping, inspired by Ruby on Rails helpers.

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

* 🧩 Intuitive JSX API for conditions & lists
* 💪 Type-safe, tree-shakable, and tiny (~300B gzipped)
* 🌀 Rails-inspired `ChousyEach` for expressive mapping
* 🧭 Navbar highlighting out of the box
* 🎨 Tailwind CSS & clsx ready
* ♿ Accessible, modern, and beautiful

---

## 📦 Install

```bash
npm install react-chousy
```

---

## 📚 Documentation

See the full documentation and live examples at:

👉 <a href="https://react-chousy-doc.vercel.app/" target="_blank" rel="noopener">react-chousy documentation</a>

---

## 🛠 Quick Usage

```tsx
import { ConditionalRender, ChousyEach } from 'react-chousy';

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

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>
```

---

## 👨‍💻 Author

Made with ❤️ by **Joelnbl**  
🔗 [GitHub](https://github.com/joelnbl)  
🐦 [Twitter](https://twitter.com/joelnbl)

---

## 📝 License

MIT — use it freely, improve it, and share it!