Scalable Reusable Components in React

I will briefly go over this tutorial, with an example ErrorAlert component.

The Problem

When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component woul…


This content originally appeared on DEV Community and was authored by DEV Community

I will briefly go over this tutorial, with an example ErrorAlert component.

The Problem

When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component would become this:

<ErrorAlert
    data={...}
    type={...}
    closeIcon={...}
    className={...}
    onInit={...}
    onClose={...}
/>

You don't need me to tell you the disadvantages of this approach in the long run.

The Solution 

import { IonIcon } from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import React from "react";

interface IEssentials {
  className?: string;
}

const Body: React.FC<IEssentials> = ({ children, className, ...rest }) => {
  return (
    <div className={"p-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" + " " + className} {...rest} role="alert">
      {children}
    </div>
  );
};

const Text: React.FC<IEssentials> = ({ children, className, ...rest }) => {
  return (
    <div className={"flex items-center gap-1" + " " + className} {...rest}>
      <IonIcon icon={alertCircleOutline} />
      <div>{children}</div>
    </div>
  );
};

export const ErrorAlert = { Body, Text };

Usage

import { ErrorAlert } from "./ErrorAlert.tsx"

const data = [...];

const App: React.FC = () => {
    return (
        <div>
            <ErrorAlert.Body>
               {data.map((dataItem) => (
                  <ErrorAlert.Text>
                     {dataItem}
                  </ErrorAlert.Text>
               ))}
            </ErrorAlert.Body>
        </div>
    )
}

Advantages of this approach

  • Open/Closed principle (SOLID): It should be open to extend but closed for modification.
  • Single Responsibility Principle (SOLID): Individual child components should have a single responsibility or perform a single function, this approach makes it easier to extend without having to modify the whole component.
  • Decoupling enables adding explicit functionalities based on requirements.
  • Easy refactoring.


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-03-16T08:03:45+00:00) Scalable Reusable Components in React. Retrieved from https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/

MLA
" » Scalable Reusable Components in React." DEV Community | Sciencx - Wednesday March 16, 2022, https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/
HARVARD
DEV Community | Sciencx Wednesday March 16, 2022 » Scalable Reusable Components in React., viewed ,<https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/>
VANCOUVER
DEV Community | Sciencx - » Scalable Reusable Components in React. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/
CHICAGO
" » Scalable Reusable Components in React." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/
IEEE
" » Scalable Reusable Components in React." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/. [Accessed: ]
rf:citation
» Scalable Reusable Components in React | DEV Community | Sciencx | https://www.scien.cx/2022/03/16/scalable-reusable-components-in-react/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts