ConditionalRender

ConditionalRender

ConditionalRender lets you declaratively render content based on a boolean condition, making your JSX cleaner and more readable than using ternary (? :) or && operators.

Usage

import { ConditionalRender } from 'react-chousy';

<ConditionalRender condition={isLoggedIn}>
  {{
    true: <p>Welcome, hero 🦸!</p>,
    false: <p>Access denied! 🚫 Please log in.</p>
  }}
</ConditionalRender>

Nesting Example

<ConditionalRender condition={isLoggedIn}>
  {{
    true: (
      <ConditionalRender condition={hasProfile}>
        {{
          true: <p>Welcome to your profile 👤</p>,
          false: <p>Finish setting up your profile ✍️</p>
        }}
      </ConditionalRender>
    ),
    false: <p>Please log in to continue 👋</p>
  }}
</ConditionalRender>

API

PropTypeDescription
conditionbooleanThe condition to evaluate
childrenobject{ true, false } JSX content