DEV Community

Narender Saini
Narender Saini

Posted on • Updated on

How to create Tab Manager in React

How to create Tab Manager in React

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.

  1. The first part will be an array of object which is going to be our tabs.
  2. 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.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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>
        ))}
Enter fullscreen mode Exit fullscreen mode

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,
};

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

Now its time to call our component.

We can import our component like this.

import { TabManager } from "./tabManager";
Enter fullscreen mode Exit fullscreen mode

Let’s use hooks for managing activeTab.

  const [activeTab, handleTab] = useState(0);
Enter fullscreen mode Exit fullscreen mode

We can create some dummy tabs array.

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

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

You can see the output look like this.

Edit 9kneg

You can see the source code on codeSandbox as well. I hope you have learned how to create tab manager in React.

Also checkout how to create dialog box in React.

Top comments (4)

Collapse
 
benjaminwolkchen profile image
Benjamin

the link to codesandbox doesn't work

Collapse
 
narendersaini32 profile image
Narender Saini

Thanks buddy . Now its working

Collapse
 
02isafi profile image
isafi • Edited

hello i am applying your code and it's working but I want to add image in front of all label and it would be separate image. how can I do it?

Collapse
 
narendersaini32 profile image
Narender Saini

simple html code