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

<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

npm install react-chousy

📚 Documentation

See the full documentation and live examples at:

👉 react-chousy documentation

🛠 Quick Usage

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
🐦 Twitter

📝 License

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