{"id":15063493,"url":"https://github.com/hardyyb2/react-conditional-match","last_synced_at":"2026-02-02T07:01:50.124Z","repository":{"id":86196948,"uuid":"606426404","full_name":"hardyyb2/react-conditional-match","owner":"hardyyb2","description":"component KIT to improve Developer eXperience.","archived":false,"fork":false,"pushed_at":"2023-03-02T15:12:04.000Z","size":928,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T07:05:01.825Z","etag":null,"topics":["conditional-rendering","javascript","jsx","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hardyyb2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-25T13:10:01.000Z","updated_at":"2023-08-03T05:03:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"ab2ec751-ba28-42fd-bbdf-014843a6fc1f","html_url":"https://github.com/hardyyb2/react-conditional-match","commit_stats":{"total_commits":51,"total_committers":1,"mean_commits":51.0,"dds":0.0,"last_synced_commit":"f358b2cf35d3c18084aeb72457f6f029710655cf"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/hardyyb2/react-conditional-match","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardyyb2%2Freact-conditional-match","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardyyb2%2Freact-conditional-match/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardyyb2%2Freact-conditional-match/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardyyb2%2Freact-conditional-match/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hardyyb2","download_url":"https://codeload.github.com/hardyyb2/react-conditional-match/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hardyyb2%2Freact-conditional-match/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262026903,"owners_count":23246952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conditional-rendering","javascript","jsx","react","typescript"],"created_at":"2024-09-24T23:58:33.383Z","updated_at":"2026-01-12T02:31:38.348Z","avatar_url":"https://github.com/hardyyb2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Conditional Match\n\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@dx-kit/react-conditional-match@latest)](https://bundlephobia.com/package/@dx-kit/react-conditional-match)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA lightweight and flexible React component for conditional rendering that supports multiple matches and fallbacks.\n\nUse it to implement complex rendering logic without having to write complex conditional logic with ternaries or if-else blocks.\n\n[DEMO](https://stackblitz.com/edit/vitejs-vite-sz2s9x)\n\n## Features\n\n- **Multiple render conditions**: With ConditionalMatch, you can specify multiple conditions for rendering different components based on the current state of the application.\n\n- **Supports multiple matches**: Use the \u003ccode\u003eConditionalMatch \u003c/code\u003ecomponent to render multiple children based on the conditions you define. The component will render all children that match the condition.\n- **Supports fallback**: Use the \"fallback\" prop to provide a fallback for when none of the children match the condition.\n- **TypeScript support**: ConditionalMatch is built with TypeScript and provides type definitions for easy integration into TypeScript projects.\n- **Lightweight and flexible**: The ConditionalMatch component is small and can be easily integrated into any React project.\n\n## Installation\n\nYou can install the \u003ccode\u003e@dx-kit/react-conditional-match\u003c/code\u003e component using npm or yarn or pnpm:\n\n```\nnpm i @dx-kit/react-conditional-match\n```\n\nor\n\n```\nyarn add @dx-kit/react-conditional-match\n```\n\nor\n\n```\npnpm i @dx-kit/react-conditional-match\n```\n\n## Usage\n\n\u003e **See more examples here** - [examples](https://stackblitz.com/edit/vitejs-vite-sz2s9x)\n\nTo use the ConditionalMatch component in your React project, you need to import it and use it in your JSX code.\n\n```typescript\nimport React, { useState } from \"react\";\nimport { ConditionalMatch } from \"@dx-kit/react-conditional-match\";\n\nconst MyComponent = () =\u003e {\n  const [val, setVal] = useState(2);\n\n  return (\n    \u003cConditionalMatch fallback={\u003cdiv\u003eNo matches found.\u003c/div\u003e}\u003e\n      \u003cConditionalMatch.Render when={val \u003c 5}\u003e{val} is less than 5\u003c/ConditionalMatch.Render\u003e\n      \u003cConditionalMatch.Render when={val === 5}\u003e{val} is equal than 5 \u003c/ConditionalMatch.Render\u003e\n      \u003cConditionalMatch.Render when={val \u003e 5}\u003e{val} is greater than 5 \u003c/ConditionalMatch.Render\u003e\n    \u003c/ConditionalMatch\u003e\n  );\n};\n```\n\nIn this example, the ConditionalMatch component will render the first child that matches one of the conditions. If none of the children match the condition, the component will render the fallback element.\n\n```typescript\n\u003cConditionalMatch fallback='Initial state'\u003e\n  \u003cRender when={loading}\u003eLoading...\u003c/Render\u003e\n  \u003cRender when={data?.length}\u003e\n    \u003cDataComp data={data} /\u003e\n  \u003c/Render\u003e\n  \u003cRender when={error}\u003e{error}\u003c/Render\u003e\n\u003c/ConditionalMatch\u003e\n```\n\n## Usage compared with _if-else_ and _ternary_\n\n|                      | Image                                                | Description                                                                                       |\n| -------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| **if-else**          | ![if-else](./assets/if-else.png)                     | - Simple syntax\u003cbr\u003e- Easy to read                                                                 |\n| **ternary**          | ![ternary](./assets/ternary.png)                     | - More concise \u003cbr /\u003e - Harder to read.                                                           |\n| **ConditionalMatch** | ![conditional-match](./assets/conditional-match.png) | - Easy nesting \u003cbr/\u003e - Simple syntax \u003cbr /\u003e - Easy to read \u003cbr /\u003e - Supports **multiple matches** |\n\n\u003cbr/\u003e\n\n## Props\n\n### _ConditionalMatch_\n\n| Prop name  | Type                                   | Default value | Description                                                               |\n| ---------- | -------------------------------------- | ------------- | ------------------------------------------------------------------------- |\n| fallback   | `React.ReactNode`                      | -             | The fallback element to render if no children match the condition         |\n| children   | `JSX.Element \\| JSX.Element[] \\| null` | `null`        | The children to search for a matching condition                           |\n| multiMatch | `boolean`                              | `false`       | Whether to render all matching children (if true) or only the first match |\n\n### _Render_\n\n| Prop name | Type                                | Description                                               |\n| --------- | ----------------------------------- | --------------------------------------------------------- |\n| when      | `T \\| undefined \\| null \\| boolean` | The condition to determine whether to render the children |\n| children  | `React.ReactNode`                   | The children to render if the condition is true           |\n\n## Contributing\n\nIf you find a bug or have an idea for a new feature, feel free to submit an issue or pull request on the GitHub repository: [https://github.com/hardyyb2/react-conditional-match.git](https://github.com/hardyyb2/react-conditional-match.git)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhardyyb2%2Freact-conditional-match","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhardyyb2%2Freact-conditional-match","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhardyyb2%2Freact-conditional-match/lists"}