Reusable React Components Across Multiple Screens

When developing applications, reusability stands as a cornerstone of efficient coding. With React's component-based architecture, we can seamlessly implement a single component across various screens, ensuring consistency and reducing redundancy.

Building the Tab Component

Let's start with a versatile Tab component that enables navigation between different sections within a screen. Here's a simplified version of the component:

// Tab.js
import React, { useState } from 'react';

export default function Tab({ children, tab1Text, tab2Text }) {
  const [activeTab, setActiveTab] = useState('tab1');

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div className="tab-component">
      <div className='button-container'>
        <button
          className={activeTab === 'tab1' ? 'active tab-button' : 'tab-button'}
          onClick={() => handleTabClick('tab1')}
        >
          {tab1Text}
        </button>
        <button
          className={activeTab === 'tab2' ? 'active tab-button' : 'tab-button'}
          onClick={() => handleTabClick('tab2')}
        >
          {tab2Text}
        </button>
      </div>

      {activeTab === 'tab1' && (
        <div className="tab-content">
          {children[0]}
        </div>
      )}

      {activeTab === 'tab2' && (
        <div className="tab-content">
          {children[1]}
        </div>
      )}
    </div>
  );
}

Implementing the Component in Different Screens

Utilizing the Tab component in various screens is seamless. Let's consider an example of its implementation in two screens: EmployeeSetUp and PayrollItemSetUp.

// EmployeeSetUp.js
import React from 'react';
import Tab from './Tab';

export default function EmployeeSetUp() {
  return (
    <div>
      <h1>Employee Set-up Screen</h1>
      <Tab tab1Text="Employee Set-up" tab2Text="Payroll Item Set-up">
        <div>
          <p>Section for Employee Set-up</p>    
        </div> 
        <div>
          <p>Section for Payroll Item Set-up</p>
        </div>
      </Tab>
    </div>
  );
}

// PayrollItemSetUp.js
import React from 'react';
import Tab from './Tab';

export default function PayrollItemSetUp() {
  return (
    <div>
      <h1>Payroll Item Set-up Screen</h1>
      <Tab tab1Text="Employee Set-up" tab2Text="Payroll Item Set-up">
        <div>
          <p>Section for Employee Set-up</p>    
        </div> 
        <div>
          <p>Section for Payroll Item Set-up</p>
        </div>
      </Tab>
    </div>
  );
}

The Versatility Unveiled

By employing the Tab component across multiple screens, such as EmployeeSetUp and PayrollItemSetUp, we achieve consistency in tab navigation and content display. This reusable component streamlines development efforts and fosters a unified user experience throughout the application.

Wrapping Up

Leveraging React components for diverse screen implementations not only enhances consistency but also significantly reduces code duplication. Incorporating reusable components is key to efficient and maintainable application development.