bang-button v0.20.0

🚀 awesome-react-components

An Awesome React Library for Utility Components and Hooks.

Installation

For npm users

$ npm install awesome-react-components

For pnpm users

$ pnpm install awesome-react-components

For yarn users

$ yarn add awesome-react-components

Components

• If
• Then
• Else
• For

If

• A replacement of ternary operator for rendering the components

Working

• If you pass only one children and condition is false then it will return null otherwise the childen will be rendered.
• If you pass two or more childs and condition is false then it will return all of the children except first child otherwise the first child will be rendered.

Example

import { If } from 'awesome-react-components';

// For react lazy loading
import { lazy } from 'react';
const SomeLazyComponent = lazy(() => import('./some-lazy-component'));

// For nextjs lazy loading
import dynamic from 'next/dynamic';
const SomeLazyComponent = dynamic(() => import('./some-lazy-component'), { ssr: false });

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

         {/* Passing more than one children and a truthy condition prop */}
         <If codition={true}>
            <h1>this is will render</h1>
            <h2>this is will not render. As condition it truthy, the first children will render</h2>
         </If>

         {/* Passing more than one children and a falsy condition prop */}
         <If codition={falsy}>
            <h1>this is will not render</h1>
            <h2>this is will render. As condition it falsy, then second children will render</h2>
            <h2>this is will also render</h2>
         </If>

         {/* Passing two childrens, 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. */}
            <SomeLazyComponent />
            <h2>this is will render</h2>
         </If>
      </div>
   );
}

Then

• Takes the children and renders that children

Example

import { If, Then } from 'awesome-react-components';

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

Else

• Takes the children and renders that children

Example

import { If, Then, Else } from 'awesome-react-components';

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

         <If codition={true}>
            <Then>
               <h1>this will render.</h1>
            </Then>
            <Else>
               <h1>this will not render.</h1>
            </Else>
         </If>
      </div>
   );
}

For

• Use this component instead of Array.map() for rendering the component

Example

import { For } from 'awesome-react-components';
import CardComponent from './CardComponent';

export default function YourComponent() {
   const Data = [
      { id: 1, course: 'Javascript' },
      { id: 2, course: 'React' },
   ];

   return (
      <div>
         <For loop={Data.length}>
            {(i) => {
               return <CardComponent key={Data[i].id}>{Data[i].course}</CardComponent>;
            }}
         </For>
      </div>
   );
}