# classic-react-components

> A great collection of React utility components

Latest version **0.4.0** (published 2025-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install classic-react-components
pnpm add classic-react-components
yarn add classic-react-components
bun add classic-react-components
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2025-12-25 |
| First published | 2023-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 1 |
| Unpacked size | 59.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 6 |
| Author | Ashish-simpleCoder |
| Maintainers | ashish-simplecoder |
| Keywords | react utility components, components, utility components |

## Links

- npm: https://www.npmjs.com/package/classic-react-components
- Repository: https://github.com/Ashish-simpleCoder/classic-react-components
- Issues: https://github.com/Ashish-simpleCoder/classic-react-components/issues
- npm.io page: https://npm.io/package/classic-react-components

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^18.2.0

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2025-12-25
- 0.3.0 — 2025-05-01
- 0.2.0 — 2024-08-16
- 0.1.0 — 2023-08-14

## README

# 🚀 classic-react-components

## Intro

- Simplifying the way you write conditional and loops in JSX.

- Adding `If-Else` like syntax for conditional jsx.
- Adding `For` component to map over the data within jsx.
- Adding `Switch-Case` to your jsx.


<br />
<p align="left">
  <a href="https://badge.fury.io/Ashish-simpleCoder/classic-react-components">
    <img src="https://badge.fury.io/js/classic-react-components.svg" alt="npm version">
  </a>
    <img src="https://img.shields.io/badge/Licence-MIT-success" alt="MIT license." />
  <a href="https://github.com/Ashish-simpleCoder/classic-react-components/actions/workflows/test.yml">
    <img src="https://img.shields.io/github/actions/workflow/status/Ashish-simpleCoder/classic-react-components/test.yml?label=Test&logo=GitHub" alt="Test" />
  </a>
  <a href="https://github.com/Ashish-simplecoder/classic-react-components/actions/workflows/main.yml">
    <img src="https://img.shields.io/github/actions/workflow/status/Ashish-simpleCoder/classic-react-components/main.yml?label=CI&logo=GitHub" alt="Jest is released under the MIT license." />
  </a>
</p>

## Features

- Built in Typescript
- Supports Treeshaking
- Small bundle size
- Minimal and Easy to use
- Open Source

## Installation

For npm users

```bash
$ npm install classic-react-components
```

For pnpm users

```bash
$ pnpm install classic-react-components
```
For bun users

```bash
$ bun install classic-react-components
```

For yarn users

```bash
$ yarn add classic-react-components
```

## Components

-  [If](#if)
-  [Then](#then)
-  [Else](#else)
-  [For](#for)
-  [Repeat](#repeat)
-  [Switch](#switch)


## If

| Prop      |   Type    | Required | Default Value | Description                                                                                  |
| --------- | :-------: | :------: | :-----------: | -------------------------------------------------------------------------------------------- |
| condition |    any    |    ❌    |     false     | Based on the evaluation of `condition` prop, either children or null will be rendered         |
| children  | ReactNode |    ❌    |     null      |      Renders the passed children                                                                 |
| suspense  |  boolean  |    ❌    |     false     | Used for rendering lazily loaded components                              |
| fallback  | ReactNode |    ❌    |     null      | Used for showing the fallback until the suspensed children have been loaded.  |

### Working

-  Based on evaulation of the condition flag the children are rendered.
-  If the condition is true then it will render the children otherwise null.
-  Working with one child
   -  If condition is true then child will be rendered.
   -  If condition is false then null gets rendered.
-  Working with children(more than one child)
   -  If condition is true then the first child will be rendered.
   -  Otherwise the all of the children will be rendered excluding the first child.

### Examples

```tsx
import { If } from 'classic-react-components'

export default function YourComponent() {
   return (
      <div>
         {/* Passing only one children and a condition prop */}
         <If codition={true}>
            <h1>it will render.</h1>
         </If>

         {/* Passing more than one children and a truthy condition prop */}
         <If codition={false}>
            <h1>it will not render</h1>
            <h2>it will render. As condition it falsy</h2>
         </If>

         {/* Passing more than one children and a falsy condition prop */}
         <If codition={falsy}>
            <h1>it will not render</h1>
            <h2>it will render. As condition it falsy.</h2>
            <h2>it will also render</h2>
         </If>
      </div>
   )
}
```

#### <i>Usage with Suspense</i>

```tsx
import { If, Then, Else } from 'classic-react-components'
import { lazy } from 'react'

const YourLazyComponent = lazy(() => import('./YourLazyComponent'))

export default function YourComponent() {
   return (
      <div>
         {/* Passing two children, condition and suspense props */}
         <If codition={false} suspense>
            {/* This component will only download when the condition evaluates to true.
             Here condition is falsy, it will not be downloaded. */}
            <Then>
               <YourLazyComponent />
            </Then>
            <Else>
               <h2>this is will render</h2>
            </Else>
         </If>
      </div>
   )
}
```


### Replacing ternary and short-circuit

```tsx
   const show = true // some state, which will be toggled to true|false

   // ❌ ternary operator
  { show ? <h1>main content</h1>:<h1>fallback</h1> }
   // ❌ short circuit 
  { show && <h1>main content</h1> }


   // ✅ replace ternary
   <If>
      <Then>
         <h1>main content</h1>
      </Then>
      <Else>
         <h1>fallback</h1>
      </Else>
   </If>

   // ✅ replace short circuit
   <If>
      <h1>main content</h1>
   </If>
```

## Then

| Prop     |   Type    | Required | Default Value | Description                 |
| -------- | :-------: | :------: | :-----------: | --------------------------- |
| children | ReactNode |    ❌    |     null      | Renders the passed children |

### Working

-  It should be used in-conjunction with `If` commponent.
-  It renders the passed children.

### Examples

```tsx
import { If, Then } from 'classic-react-components'

export default function YourComponent() {
   return (
      <div>
         <If codition={true}>
            <Then>
               <h1>this will render.</h1>
            </Then>
         </If>
      </div>
   )
}
```

## Else

| Prop     |   Type    | Required | Default Value | Description                 |
| -------- | :-------: | :------: | :-----------: | --------------------------- |
| children | ReactNode |    ❌    |     null      | Renders the passed children |

### Working

-  It should be used in-conjunction with `If` commponent.
-  It renders the passed children.

### Examples

```tsx
import { If, Then, Else } from 'classic-react-components'

export default function YourComponent() {
   return (
      <div>
         <If codition={2 + 2 == 4}>
            <Then>
               <h1>this will render.</h1>
            </Then>
            <Else>
               <h1>this will not render.</h1>
            </Else>
         </If>
      </div>
   )
}
```

## For

| Prop     |   Type    | Required | Default Value | Description                                    |
| -------- | :-------: | :------: | :-----------: | ---------------------------------------------- |
| data     |   Array   |    ❌    |   undefined   | Used for looping over the data and rendering the children                             |
| children | ((item: T[number], i: number) => JSX.Element) | null |    ❌    |     null      | Renders the `JSX` returned from child function |

### Working

-  Replacement of `Array.map` method used for rendering the list in jsx.
-  Used to iterate over an array of items and renders the `JSX` based on the provided child function.


### Examples

```tsx
import { For } from 'classic-react-components'
import CardComponent from './CardComponent'

export default function YourComponent() {
   const Data = [
      { id: 1, course: 'Javascript' },
      { id: 2, course: 'React' },
   ]
   return (
      <div>
         <For data={Data}>
            {(item, index) => {
               return <CardComponent key={item.id}>{item.course}</CardComponent>
            }}
         </For>
      </div>
   )
}
```

### Replacing Array.map used in jsx for rendering the list

```tsx
   const data = [1,2,3]   // some async data

   // ❌ using Array.map to render jsx
   {data.length > 0 && data.map((item, index) => {
      return <CardComponent key={item.id}>{item.course}</CardComponent>
   })}


   // ✅ using For component to render jsx without needing to check if data is defined or not
   <For data={data}>
      {(item, index) => {
         return <CardComponent key={item.id}>{item.course}</CardComponent>
      }}
   </For>
```


## Repeat

| Prop     |   Type    | Required | Default Value | Description                                    |
| -------- | :-------: | :------: | :-----------: | ---------------------------------------------- |
| times     |   number   |    ❌    |   0   | Times to repeat the children                             |
| children |     JSX.Element \| (()=> JSX.Element) |  ❌   |     undefined      | children needed to repeat |

### Working

- Used for rendering template or loaders in repeated manner without writing `new Array(length).map()` code.
- Just pass `times` and `children` props, and children will be renderd `n times` automatically.



### Examples

#### 1. Passing children as default JSX
```tsx
import { Repeat } from 'classic-react-components'

export default function YourComponent() {
   
   return (
      <div>
        <Repeat times={1}>
           <div>this is going to repeated</div>
        </Repeat>
      </div>
   )
}
```

#### 2. Passing children as function which renders jsx (used to dynamically injecting things in jsx).
```tsx
import { Repeat } from 'classic-react-components'

export default function YourComponent() {
   const someState = "this is text"
   return (
      <div>
        <Repeat times={3}>
          {(idx) => {
            return (
              <div>this is content-{idx}- {someState}</div>
            )
          }}
        </Repeat>
      </div>
   )
}
```


## Switch

| Prop     |   Type    | Required | Default Value | Description                                                      |
| -------- | :-------: | :------: | :-----------: | ---------------------------------------------------------------- |
| item     |    any    |    ❌    |   undefined   | The value used for comparing with all of the cases                                              |
| children | ReactNode |    ✅    |       -       | Used for rendering the children of matched case if found, else Default Case's children will be rendered |

### Working

-  Renders the children of particular matched case for given prop `item(switch value)`.
-  If none of cases are matched for given prop `item`, the `Default` case will be rendered.

> **Note:** The order of Default Case does not matter.

### Examples

```tsx
import { Switch } from 'classic-react-components'
import CardComponent from './CardComponent'

export default function YourComponent({ item }: { item: 'coding' | 'sleep' }) {
   return (
      <div>
         <Switch item={item}>
            {({ Case, Default }) => {
               return (
                  <>
                     <Case value='coding'>
                        <div>coing-case</div>
                     </Case>
                     <Case value='sleep'>
                        <div>sleep-case</div>
                     </Case>
                     <Default>
                        <div>this is default case</div>
                     </Default>
                  </>
               )
            }}
         </Switch>
      </div>
   )
}

```
### Replacing object switching for rendering the jsx
```tsx
   const item: "sleep"|"coding" = "sleep"

   // ❌ using old object switching
   // first define seperate object and match the case manually and can not define fallback case here at all
   const itemSwitches = {
      "coding":<div>coing-case</div>,
      "sleep":<div>sleep-case</div>,
   }
   const MatchedCase = itemSwitches(item) ?? <div>fallback</div> // manually giving fallback

   // render in the jsx
   {MatchedCase}



   // ✅ using Switch component 

   // much better, we do not have to lookup for the switch logic and jumping between states and jsx unlike with Object switching

   // it support default case if no case is matched. we can not do it in one plase with object switching

   // it is typesafe
   <Switch item={item}>
      {({ Case, Default }) => {
         return (
            <>
               <Case value='coding'>
                  <div>coing-case</div>
               </Case>
               <Case value='sleep'>
                  <div>sleep-case</div>
               </Case>
               <Default>
                  <div>this is default case</div>
               </Default>
            </>
         )
      }}
   </Switch> 
```

---
_Source: https://npm.io/package/classic-react-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._