🚀 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
• Repeat
• 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'exportdefaultfunctionYourComponent(){return(<div>{/* Passing only one children and a condition prop */}<Ifcodition={true}><h1>it will render.</h1></If>{/* Passing more than one children and a truthy condition prop */}<Ifcodition={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 */}<Ifcodition={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'constYourLazyComponent=lazy(()=>import('./YourLazyComponent'))exportdefaultfunctionYourComponent(){return(<div>{/* Passing two children, condition and suspense props */}<Ifcodition={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

constshow=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'exportdefaultfunctionYourComponent(){return(<div><Ifcodition={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'exportdefaultfunctionYourComponent(){return(<div><Ifcodition={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

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'importCardComponentfrom'./CardComponent'exportdefaultfunctionYourComponent(){constData=[{id: 1,course: 'Javascript'},{id: 2,course: 'React'},]return(<div><Fordata={Data}>{(item,index)=>{return<CardComponentkey={item.id}>{item.course}</CardComponent>}}</For></div>)}

Replacing Array.map used in jsx for rendering the list

constdata=[1,2,3]// some async data// ❌ using Array.map to render jsx{data.length>0&&data.map((item,index)=>{return<CardComponentkey={item.id}>{item.course}</CardComponent>})}// ✅ using For component to render jsx without needing to check if data is defined or not<Fordata={data}>{(item,index)=>{return<CardComponentkey={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

import{Repeat}from'classic-react-components'exportdefaultfunctionYourComponent(){return(<div><Repeattimes={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).

import{Repeat}from'classic-react-components'exportdefaultfunctionYourComponent(){constsomeState="this is text"return(<div><Repeattimes={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

import{Switch}from'classic-react-components'importCardComponentfrom'./CardComponent'exportdefaultfunctionYourComponent({ item }: {item: 'coding'|'sleep'}){return(<div><Switchitem={item}>{({ Case, Default })=>{return(<><Casevalue='coding'><div>coing-case</div></Case><Casevalue='sleep'><div>sleep-case</div></Case><Default><div>this is default case</div></Default></>)}}</Switch></div>)}

Replacing object switching for rendering the jsx

constitem: "sleep"|"coding"="sleep"// ❌ using old object switching// first define seperate object and match the case manually and can not define fallback case here at allconstitemSwitches={"coding":<div>coing-case</div>,"sleep":<div>sleep-case</div>,}constMatchedCase=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<Switchitem={item}>{({ Case, Default })=>{return(<><Casevalue='coding'><div>coing-case</div></Case><Casevalue='sleep'><div>sleep-case</div></Case><Default><div>this is default case</div></Default></>)}}</Switch>