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

Features

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

Installation

For npm users

$ npm install classic-react-components

For pnpm users

$ pnpm install classic-react-components

For bun users

$ bun install classic-react-components

For yarn users

$ yarn add classic-react-components

Components

• If
• Then
• Else
• For
• 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

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>
   )
}

Usage with Suspense

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

   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

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

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 | ReactNode | ❌ | 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

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

   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>

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

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

   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>