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.

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

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

Variations

For more variations you can checkout my repo here.

Variation 1

Variation 2

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