Global

Place to create local, reusable and global components within the application project.

Overview

Identify reusable components (global), Before splitting components, identify which components are likely to be reused across multiple pages of your application. These components can be placed in a separate directory and then imported into the respective pages.

How to use

If you are going to create a global component that applies only to the project then you can use this method.

Step 1: Create a component

The first step you have to create a component folder in src/components/global. With the file structure as below.

Button
├── index.tsx
└── style.ts

Step 2: Component code

index.tsx used to place the root function component in which there are props and rendering elements.

// Vendors
import React, { ButtonHTMLAttributes } from 'react';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  text: string;
  color?: 'primary' | 'secondary';
}

const Button = ({ text, color = 'primary', ...rest }: ButtonProps) => {
  const classes = `button button-${color}`;

  return (
    <button className={classes} {...rest}>
      {text}
    </button>
  );
};

export default Button;

Step 3: Import component

We use aliases for component usage, code as shown below. You can check aliases configs in tsconfig.json

import Button from '@/components/global/Button';