Installation

You can install the package via npm:

npm install sagar-utility-components

Or via yarn:

yarn add sagar-utility-components

Or via bun:

bun add sagar-utility-components

After installation, you can import the components in your React application as follows:

import { Each, Show } from "sagar-utility-components";

Components

Each

The Each component is used for rendering each item in an array.

Usage

<Each of={array} render={(item, index) => <Item key={index} item={item} />} />

Props

• of (T[]): The array of items to render.
• render ((item: T, index: number) => React.ReactNode): A function that takes an item from the array and returns its rendering.

Show

The Show component is used for conditionally rendering its children based on a condition.

Usage

<Show>
  <ShowWhen isTrue={condition}>
    <p>This is rendered when condition is true.</p>
  </ShowWhen>
  <ShowElse>
    <p>This is rendered otherwise.</p>
  </ShowElse>
</Show>

Props

• children (ReactNode): ReactNode to be conditionally rendered.

ShowWhen

The ShowWhen component is used as a child of Show to render its children when a condition is true.

Usage

<Show>
  <ShowWhen isTrue={condition}>
    <p>This is rendered when condition is true.</p>
  </ShowWhen>
</Show>

Props

• isTrue (boolean): Condition to be evaluated.

ShowElse

The ShowElse component is used as a child of Show to render its children or a specified render prop if provided.

Usage

<Show>
  <ShowWhen isTrue={condition}>
    <p>This is rendered when condition is true.</p>
  </ShowWhen>
  <ShowElse>
    <p>This is rendered otherwise.</p>
  </ShowElse>
</Show>

Props

• children (ReactNode): ReactNode to be rendered.
• render (ReactNode): Alternative ReactNode to be rendered if provided.