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
Top comments (0)