Case Render

Overview

Case Render is a utility component that simplifies conditional rendering in React. It renders children only when a condition is true, providing a cleaner alternative to ternary operators or logical AND operators.

Installation

npx shadcn@latest add https://foodease-dev-registry.cap.reachcinema.io/r/v1/case-render.json

Usage

Basic Usage

import { CaseRender } from "@/components/ui/case-render"

export default function Example() {
  const [showContent, setShowContent] = useState(false)

  return (
    <div>
      <button onClick={() => setShowContent(!showContent)}>
        Toggle
      </button>
      
      <CaseRender show={showContent}>
        <p>This content is conditionally rendered</p>
      </CaseRender>
    </div>
  )
}

Multiple Conditions

import { CaseRender } from "@/components/ui/case-render"

export default function UserProfile({ user }) {
  return (
    <div>
      <CaseRender show={user.isAdmin}>
        <AdminPanel />
      </CaseRender>
      
      <CaseRender show={user.isPremium}>
        <PremiumFeatures />
      </CaseRender>
      
      <CaseRender show={!user.isPremium}>
        <UpgradePrompt />
      </CaseRender>
    </div>
  )
}

With Complex Conditions

import { CaseRender } from "@/components/ui/case-render"

export default function OrderStatus({ order }) {
  const isDelivered = order.status === "delivered"
  const isPending = order.status === "pending"
  const isCancelled = order.status === "cancelled"

  return (
    <div>
      <CaseRender show={isDelivered}>
        <Badge variant="success">Delivered</Badge>
      </CaseRender>
      
      <CaseRender show={isPending}>
        <Badge variant="warning">Pending</Badge>
      </CaseRender>
      
      <CaseRender show={isCancelled}>
        <Badge variant="destructive">Cancelled</Badge>
      </CaseRender>
    </div>
  )
}

API Reference

CaseRender

Prop	Type	Description
`show`	`boolean`	Condition to determine if children should render
`children`	`ReactNode`	Content to render when condition is true

Why Use Case Render?

Instead of Ternary

// Without CaseRender
{isLoggedIn ? <UserMenu /> : null}

// With CaseRender
<CaseRender show={isLoggedIn}>
  <UserMenu />
</CaseRender>

Instead of Logical AND

// Without CaseRender
{hasPermission && <AdminButton />}

// With CaseRender
<CaseRender show={hasPermission}>
  <AdminButton />
</CaseRender>

Cleaner Multiple Conditions

// Without CaseRender
{status === "loading" ? <Spinner /> : null}
{status === "error" ? <Error /> : null}
{status === "success" ? <Content /> : null}

// With CaseRender
<CaseRender show={status === "loading"}>
  <Spinner />
</CaseRender>

<CaseRender show={status === "error"}>
  <Error />
</CaseRender>

<CaseRender show={status === "success"}>
  <Content />
</CaseRender>

Examples

Loading States

import { CaseRender } from "@/components/ui/case-render"

export default function DataDisplay({ loading, error, data }) {
  return (
    <div>
      <CaseRender show={loading}>
        <Spinner />
      </CaseRender>
      
      <CaseRender show={error}>
        <ErrorMessage message={error} />
      </CaseRender>
      
      <CaseRender show={!loading && !error && data}>
        <DataTable data={data} />
      </CaseRender>
    </div>
  )
}

Feature Flags

import { CaseRender } from "@/components/ui/case-render"

export default function Dashboard({ features }) {
  return (
    <div>
      <CaseRender show={features.analytics}>
        <AnalyticsWidget />
      </CaseRender>
      
      <CaseRender show={features.notifications}>
        <NotificationCenter />
      </CaseRender>
      
      <CaseRender show={features.darkMode}>
        <ThemeToggle />
      </CaseRender>
    </div>
  )
}

User Permissions

import { CaseRender } from "@/components/ui/case-render"

export default function Actions({ user, canEdit, canDelete }) {
  return (
    <div className="flex gap-2">
      <CaseRender show={canEdit}>
        <Button>Edit</Button>
      </CaseRender>
      
      <CaseRender show={canDelete}>
        <Button variant="destructive">Delete</Button>
      </CaseRender>
      
      <CaseRender show={user.isOwner}>
        <Button variant="secondary">Transfer Ownership</Button>
      </CaseRender>
    </div>
  )
}

Benefits

Readability: More explicit than ternary or logical operators
Consistency: Uniform pattern across codebase
Simplicity: No need to remember ternary syntax or falsy values
Type Safety: TypeScript knows children only render when show is true
Clean JSX: Reduces clutter in component markup

Notes

Returns null when show is false
Wraps children in React Fragment when show is true
No performance overhead compared to manual conditional rendering
Works with any React component or JSX

Case Render

On this page