How to create a custom tab in React?

Creating custom tabs in ReactJS involves building a component that manages the active tab state and renders the appropriate content based on the selected tab. Here’s how you can create custom tabs step by step:

Step 1: Set Up Your Project

Make sure you have a React project set up. You can use Create React App or any other method of your choice.

Step 2: Create the Tab Component

Create a new component for your custom tabs. You can name it something like CustomTabs.js.

import React, { useState } from 'react';

const CustomTabs = () => {
  const [activeTab, setActiveTab] = useState(0);

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

  return (
    <div className="custom-tabs">
      <div className="tab-buttons">
        <button
          className={activeTab === 0 ? 'active' : ''}
          onClick={() => handleTabClick(0)}
        >
          Tab 1
        </button>
        <button
          className={activeTab === 1 ? 'active' : ''}
          onClick={() => handleTabClick(1)}
        >
          Tab 2
        </button>
        <button
          className={activeTab === 2 ? 'active' : ''}
          onClick={() => handleTabClick(2)}
        >
          Tab 3
        </button>
      </div>
      <div className="tab-content">
        {activeTab === 0 && <div>Content for Tab 1</div>}
        {activeTab === 1 && <div>Content for Tab 2</div>}
        {activeTab === 2 && <div>Content for Tab 3</div>}
      </div>
    </div>
  );
};

export default CustomTabs;

Step 3: Style Your Tabs

You’ll want to add some CSS to make your tabs visually appealing. You can use a CSS file or a CSS-in-JS library like styled-components for this purpose.

Step 4: Use the CustomTabs Component

In your main application file (e.g., App.js), import and use the CustomTabs component:

import React from 'react';
import CustomTabs from './CustomTabs';

function App() {
  return (
    <div>
      <h1>Custom Tabs Example</h1>
      <CustomTabs />
    </div>
  );
}

export default App;

Step 5: Styling and Enhancements

Feel free to enhance and style your custom tabs according to your project’s requirements. You can add animations, apply different styles based on the active tab, and even load content dynamically from an array or API.

This example demonstrates a simple way to create custom tabs in React. You can extend and customize the functionality to meet your specific needs.