Skip to content

hardyyb2/react-conditional-match

Repository files navigation

Conditional Match

npm bundle size License: MIT

A lightweight and flexible React component for conditional rendering that supports multiple matches and fallbacks.

Use it to implement complex rendering logic without having to write complex conditional logic with ternaries or if-else blocks.

DEMO

Features

  • Multiple render conditions: With ConditionalMatch, you can specify multiple conditions for rendering different components based on the current state of the application.

  • Supports multiple matches: Use the ConditionalMatch component to render multiple children based on the conditions you define. The component will render all children that match the condition.

  • Supports fallback: Use the "fallback" prop to provide a fallback for when none of the children match the condition.

  • TypeScript support: ConditionalMatch is built with TypeScript and provides type definitions for easy integration into TypeScript projects.

  • Lightweight and flexible: The ConditionalMatch component is small and can be easily integrated into any React project.

Installation

You can install the @dx-kit/react-conditional-match component using npm or yarn or pnpm:

npm i @dx-kit/react-conditional-match

or

yarn add @dx-kit/react-conditional-match

or

pnpm i @dx-kit/react-conditional-match

Usage

See more examples here - examples

To use the ConditionalMatch component in your React project, you need to import it and use it in your JSX code.

import React, { useState } from "react";
import { ConditionalMatch } from "@dx-kit/react-conditional-match";

const MyComponent = () => {
  const [val, setVal] = useState(2);

  return (
    <ConditionalMatch fallback={<div>No matches found.</div>}>
      <ConditionalMatch.Render when={val < 5}>{val} is less than 5</ConditionalMatch.Render>
      <ConditionalMatch.Render when={val === 5}>{val} is equal than 5 </ConditionalMatch.Render>
      <ConditionalMatch.Render when={val > 5}>{val} is greater than 5 </ConditionalMatch.Render>
    </ConditionalMatch>
  );
};

In 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.

<ConditionalMatch fallback='Initial state'>
  <Render when={loading}>Loading...</Render>
  <Render when={data?.length}>
    <DataComp data={data} />
  </Render>
  <Render when={error}>{error}</Render>
</ConditionalMatch>

Usage compared with if-else and ternary

Image Description
if-else if-else - Simple syntax
- Easy to read
ternary ternary - More concise
- Harder to read.
ConditionalMatch conditional-match - Easy nesting
- Simple syntax
- Easy to read
- Supports multiple matches

Props

ConditionalMatch

Prop name Type Default value Description
fallback React.ReactNode - The fallback element to render if no children match the condition
children JSX.Element | JSX.Element[] | null null The children to search for a matching condition
multiMatch boolean false Whether to render all matching children (if true) or only the first match

Render

Prop name Type Description
when T | undefined | null | boolean The condition to determine whether to render the children
children React.ReactNode The children to render if the condition is true

Contributing

If 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