Create Tabs with React Hooks

Hello Devs, for this tutorial we’re going to make a tabs with React Hooks.

1. Create Tabs.js

Inside our Tabs.js we have two main elements. The first one is a div called tabs. Inside our tabs, we have buttons called tab-button and tab-button active if it’s in active state. The second main element is tabs-content. Inside the tabs-content, we have tab-page and tab-page active if it’s in active state.

import React from 'react';
import './tabs.css';

export default function Tabs() {
  return (
    <div>
      <div className="container">
        <div className="tabs">
          <button className="tab-button active" id="tab-1">
            Tab 1
          </button>
          <button className="tab-button" id="tab-2">
            Tab 2
          </button>
          <button className="tab-button" id="tab-3">
            Tab 3
          </button>
        </div>
        <div className="tabs-content">
          <div className="tab-page active">
            <p>This is page 1</p>
          </div>
          <div className="tab-page">
            <p>This is page 2</p>
          </div>
          <div className="tab-page">
            <p>This is page 3</p>
          </div>
        </div>
      </div>
    </div>
  );
}

2. Create tabs.css

This is our basic CSS.

.container {
  padding: 0 24px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid #c6c6c6;
}
.tab-button {
  padding: 8px 16px;
  border-radius: 0;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-button:hover {
  border-bottom: 2px solid #1d3557;
}
.tab-button.active {
  border-bottom: 2px solid #1d3557;
  color: #1d3557;
  font-weight: 700;
}
.tab-page {
  padding: 24px 16px 16px 16px;
  display: none;
}
.tab-page.active {
  display: block;
}

And BOOM, this is your tabs supposed to look like.

GIF

Very cool, now let's move on to the next step.

3. Add functionality

First, let’s create a state called active and add a value to our state to tab-1.

const [active, setActive] = useState('tab-1');

Then, create a function called handleClick.

const handleClick = (event) => {
  setActive(event.target.id);
};

Now, let’s put our handleClick function and active state to our component like this

import React, { useState } from 'react';
import './tabs.css';

export default function Tabs() {
  const [active, setActive] = useState('tab-1');

  const handleClick = (event) => {
    setActive(event.target.id);
  };

  return (
    <div>
      <div className="container">
        <div className="tabs">
          <button
            className={`tab-button ${active === 'tab-1' ? 'active' : ''}`}
            id="tab-1"
            onClick={handleClick}
          >
            Tab 1
          </button>
          <button
            className={`tab-button ${active === 'tab-2' ? 'active' : ''}`}
            id="tab-2"
            onClick={handleClick}
          >
            Tab 2
          </button>
          <button
            className={`tab-button ${active === 'tab-3' ? 'active' : ''}`}
            id="tab-3"
            onClick={handleClick}
          >
            Tab 3
          </button>
        </div>
        <div className="tabs-content">
          <div className={`tab-page ${active === 'tab-1' ? 'active' : ''}`}>
            <p>This is page 1</p>
          </div>
          <div className={`tab-page ${active === 'tab-2' ? 'active' : ''}`}>
            <p>This is page 2</p>
          </div>
          <div className={`tab-page ${active === 'tab-3' ? 'active' : ''}`}>
            <p>This is page 3</p>
          </div>
        </div>
      </div>
    </div>
  );
}

So the logic is when the tab-button is clicked, the value of the state active will change to the id of the clicked tab-button. And the logic for our inline conditional inside the tab-button and the tab-page is when the value of the state active is equal to their id, it will trigger the class active to the tab-button and the selected tab-page.

Here's what it's supposed to look like

GIF

Add disabled tabs

For disabled tabs add an attribute disabled to our button and add more lines to your CSS.

<button
  className={`tab-button ${active === 'tab-4' ? 'active' : ''}`}
  id="tab-3"
  onClick={handleClick}
  disabled //add disabled atribute
>
  Disabled Tab
</button>

/* add these lines to your css */
.tab-button:disabled:hover {
  border-bottom: 2px solid transparent;
}

GIF

Variations

For more variations you can checkout my repo here.

Variation 1

GIF

Variation 2

GIF

And there you have it, your custom React Hooks Tabs. You can check the repo here. And as always let me know in the comments if it helps or if I miss something.

---

Author

• Github: @NabillaTrisnani
• LinkendIn: Nabilla Trisnani
• Twitter: @NabillaTrisnani