DEV Community

Cover image for Create Tabs with React Hooks
Nabilla Trisnani
Nabilla Trisnani

Posted on

Create Tabs with React Hooks

#react #tab #javascript #tutorial

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

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

And BOOM, this is your tabs supposed to look like.
Tabs with just CSS with no functionality

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

Then, create a function called handleClick.



const handleClick = (event) => {
  setActive(event.target.id);
};
Enter fullscreen mode Exit fullscreen mode

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

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

Full functioning tabs

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


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

Tabs with disabled button

Variations

For more variations you can checkout my repo here.

Variation 1

Variation 1

Variation 2

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

Top comments (0)

Read next

bobbyhalljr profile image

Random Image Generation and Caching in JavaScript

Bobby Hall Jr -

nixcko profile image

Cómo empezar con TypeScript usando Vite: Configuración y compilación simplificadas 🎯

Israel Morales -

carban profile image

The All-in-One Fake API for developers.

carban -

nicooprat profile image

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

Nico Prat -