How to create Tab Manager in React

#react #html #uiweekly #css

Tab manager is one of the basic thing that you may have used in your projects. In this post we are going to learn how to create a custom reusable tab manager for our projects under just few lines of code.

The whole tab manager component is divided into 3 basic parts.

The first part will be an array of object which is going to be our tabs.
The second part will be updating the active tab on click of tab element so that when we click on any tab we can show that tab as selected tab.
The 3rd part will be the part where we just gonna provide the active tab id to tab manager.

Let’s start writing the code for our tabManager component.

Our component gonna receive only 3 props i.e activeTab ,handleTab and tabs.

In the render method of tabManager component we gonna wrap our whole component using a parent div first.

 <div className="tab-manager">

</div>

Inside this parent container we gonna run a map on the tabs prop.

{tabs.map(({ label, value }) => (
          <div
            className={`tab ${value === activeTab ? 'selected-tab' : ''}`}
            onClick={() => { handleTab(value); }}
          >
            {label}
          </div>
        ))}

As you can see we are just running a map on tabs prop which is basically an array of object and each array have only 2 keys i.e label and value.

We can use label to show the label in a child div which is going to be return by the map. Onclick of that child div we can pass the value using the handleTab prop which is basically a function. Now we can also use activeTab prop to show the current active tab in the tab manager component.

We can use a className to show the active tab in the tab manager component.

Our whole tab manager component will be gonna look like this.

import React, { Component } from 'react';
import PropTypes from 'prop-types';


export class TabManager extends Component {
  state = {}

  render() {
    const { activeTab, handleTab, tabs } = this.props;
    return (
      <div className="tab-manager">
        {tabs.map(({ label, value }) => (
          <div
            className={`tab ${value === activeTab ? 'selected-tab' : ''}`}
            onClick={() => { handleTab(value); }}
          >
            {label}
          </div>
        ))}
      </div>
    );
  }
}

TabManager.propTypes = {
  activeTab: PropTypes.number.isRequired,
  handleTab: PropTypes.func.isRequired,
  tabs: PropTypes.arrayOf(Object).isRequired,
};

After that we can add some minimal styling to showcase our component.

.App {
  font-family: sans-serif;
  text-align: center;
}
.tab-manager {
  display: flex;
  padding: 24px;
  justify-content: center;
  border-bottom: 1px solid #48484859;
}
.tab {
  padding: 12px;
  border-radius: 25px;
  text-align: center;
  cursor: pointer;
  padding: 12px 36px;
  margin: 0 24px;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: all 0.5s ease;
  color: black;
  user-select: none;
}
.tab:hover {
  background-color: rgba(0, 43, 73, 0.17);
}

.selected-tab {
  background-color: #002b49;
  color: white;
}

.tab-content {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Now its time to call our component.

We can import our component like this.

import { TabManager } from "./tabManager";

Let’s use hooks for managing activeTab.

  const [activeTab, handleTab] = useState(0);

We can create some dummy tabs array.

const TABS = [
  { label: "Tab 1", value: 1 },
  { label: "Tab 2", value: 2 },
  { label: "Tab 3", value: 3 }
];

Our file will gonna look like this in end.

import React, { useState } from "react";

import { TabManager } from "./tabManager";
import "./styles.css";

const TABS = [
  { label: "Tab 1", value: 1 },
  { label: "Tab 2", value: 2 },
  { label: "Tab 3", value: 3 }
];
export default function App() {
  const [activeTab, handleTab] = useState(0);
  return (
    <div className="App">
      <TabManager tabs={TABS} activeTab={activeTab} handleTab={handleTab} />
      <div className="tab-content">
        {" "}
        <div> Content of Tab {activeTab}</div>
      </div>
    </div>
  );
}

You can see the output look like this.