temp-sd99sd99 v1.0.2

🚀 classic-react-components

A Simple React Library of Utility Components.

Features

• Comes with treeshaking
• Typescript support

Installation

For npm users

$ npm install classic-react-components

For pnpm users

$ pnpm install classic-react-components

For yarn users

$ yarn add classic-react-components

Components

• If
• Then
• Else
• For
• Switch

If

Working

• Based the condition the children are rendered. If the condition is true then the childeren will render otherwise it will return null.

• For one children

  • If condition is true then children will render.
  • If condition is false then null gets returned.

• For multiple children

  • If conditin is true then the first children will render
  • Otherwise the all of the children will be renderd excluding the first children.

Example

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 SomeLazyComponent = lazy(() => import('./SomeLazyComponent'))

export default function YourComponent() {
   return (
      <div>
         {/* Passing two children, condition and suspense prop */}
         <If codition={false} suspense>
            {/* this component code file will only download when the condition will be true.
             In this case, codition is falsy then it will not be downloaded. */}
            <Then>
               <SomeLazyComponent />
            </Then>
            <Else>
               <h2>this is will render</h2>
            </Else>
         </If>
      </div>
   )
}

Then

Working

• Renders the passed children.
• Used in conjunction with If commponent.

Example

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

Working

• Renders the passed children.
• Used in conjunction with If commponent.

Example

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

Working

• Replacement for Array.map().
• Used to iterate over an array of items and renders the jsx according to the passed children as function.

Example

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, i) => {
               return <CardComponent key={item.id}>{item.course}</CardComponent>
            }}
         </For>
      </div>
   )
}

Switch

Working

• Renders the children of particular matched case for given item(switch value).
• If none case is matched for given item then Default case will be rendered.

Example

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