react-template-tags

Lightweight, type-safe control flow components for React.

Replace cluttered ternary operators (? :) and short-circuit logic (&&) with readable, declarative tags.

✨ Features

• Zero Dependencies: < 2kb minified.
• Strictly Typed: Full TypeScript support with proper narrowing.
• Lazy Evaluation: Supports function children to prevent unnecessary renders.
• SSR Safe: Compatible with Next.js, Remix, and standard SSR.
• Modern: React 18+ (and React 19 ready).

🚀 Quickstart

npm install react-template-tags

import { If, Switch, Each } from 'react-template-tags';

function App({ user, items, status }) {
  return (
    <>
      <If condition={user.isLoggedIn}>
        <UserWelcome user={user} />
      </If>

      <Switch value={status}>
        <Switch.Case value="loading"><Spinner /></Switch.Case>
        <Switch.Case value="error"><Error /></Switch.Case>
        <Switch.Default>
          <Each 
            of={items} 
            keyFn={item => item.id}
            render={item => <ItemCard item={item} />} 
            fallback={<EmptyState />}
          />
        </Switch.Default>
      </Switch>
    </>
  );
}

📚 Documentation

• Introduction - Why use this?
• Components - API Reference for If, Show, Switch, Each, etc.
• Guides - TypeScript, SSR, and Performance.

📦 Core Components

| Component | Description | |-----------|-------------| | <If> | Render children if condition is true. | | <IfElse> | Render children (true) or elseChildren (false). | | <Show> / <Choose> | Declarative switch (true) logic. | | <Switch> | Declarative switch (value) logic. | | <Each> | Safe list iteration with empty fallback. | | <Maybe> | Null-safe rendering helper. | | <Await> | Promise resolution helper. | | <Guard> | Assertion-based rendering. |

🤝 Contributing

Issues and Pull Requests are welcome!

License

MIT © Mike Opatskyi