JSPM

components-switch

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q48159F
  • License MIT

A lightweight React utility component library featuring Switch and Match for conditional rendering, inspired by SolidJS. Simplifies readable and declarative conditional logic in JSX.

Package Exports

  • components-switch
  • components-switch/package.json

Readme

🔀 components-switch

A lightweight React utility component library featuring Switch and Match for elegant conditional rendering—inspired by SolidJS, made for React.

✨ Features

  • 🧠 Declarative conditional rendering
  • 💡 Inspired by SolidJS's Switch/Match logic
  • 🔩 Tiny footprint & zero dependencies
  • ⚛️ Fully typed and compatible with React 17/18+

📦 Installation

npm install components-switch

Or with yarn:

yarn add react-switch-match

🧱 Usage

import { Switch, Match } from 'react-switch-match';

function Dashboard() {
  return (
    <Switch fallback={<p>If nothing is true, show this</p>}>
      <Match when={shouldShowA}>
        <Table />
      </Match>
      <Match when={shouldShowB() === true}>
        <Analytics />
      </Match>
      <Match when={true}>
        <SomethingElse />
      </Match>
    </Switch>
  );
}
import { Switch, Match } from 'react-switch-match';

function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <Switch fallback={<p>Please log in.</p>}>
      <Match when={isLoggedIn}>
        <p>Welcome back!</p>
      </Match>
    </Switch>
  );
}

📘 API

<Switch fallback={Component}> Renders the matching <Match> child. Accepts any valid React node as children. If where is no match, fallback will be shown.

<Match when={boolean}> Renders its children only if when is true. Used within a <Switch> block.”

MIT © (https://github.com/Luka-stack)