Learn how to create tabs in react.
Tabs helps to switch between different types of content without need to navigate.
It consists of two parts
1. Tabs heading.
2. Tabs content.
Tab content are show when the respective tab heading or label is clicked.
We will also create the tab component with similar functionality. It will be a functional component as we want the parent to fully control it.
There are few extra package which we will be utilizing for our development.
prop-types: It helps to validate the props that component receives.classnames: This helps us to use CSS classes as javascript objects, we just need to name our CSS file asfilename.module.cssto make it work.
Following is the folder structure of our component.
Tab component in react.
As we have created the folders lets start with our development.
Import all the required packages at the top.
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import styles from "./index.module.css";
const Tab = props => {
//Code will go here...
}
export default Tab;
First, validate all the props to make sure we don’t miss anything.
Tab.propTypes = {
activeIndex: PropTypes.number.isRequired,
tabs: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
content: PropTypes.node.isRequired,
disabled: PropTypes.bool.isRequired
})
).isRequired,
onChange: PropTypes.func.isRequired
};
Tab.defaultProps = {
activeIndex: 0
};
These are some of the generic porps that we need to create a working tab component.
activeIndex: Decides which tab is active. It will be zero based just like an array.tabs: It will be an array of objects which will should contain the object in the specified shape.labelof the tab,contentof the tab. This can be an element,disabledor not.onChange: Callback function to return the data to the parent.
By default we have kept the 0th index active.
Let us now define the layout of the component so that we can decide in what format do we need the data.
return (
<div className={styles.wrapper}>
<div className={styles.tabsHeading}>{generateTabsHeading()}</div>
<div className={styles.tabsContent}>{getActiveTab()}</div>
</div>
);
Now as you can see we need two functions.
1. To generate the tabs heading.
2. To generate the tabs content.
So lets define these two functions.
const { activeIndex, tabs, onChange } = props;
const disabledTabsList = () => {
return tabs.map(e => (e.disabled ? e.label : null));
};
const isTabDisabled = index => {
const disabled = disabledTabsList();
const tab = tabs[index];
return disabled.includes(tab.label);
};
const onClick = i => {
const isDisabled = isTabDisabled(i);
if (!isDisabled) {
onChange(i);
}
};
//Get the list of tab
const generateTabsHeading = () => {
const isDisabled = isTabDisabled(activeIndex);
const disabled = disabledTabsList();
return tabs.map((e, i) => {
return (
<div
key={e.label}
onClick={() => onClick(i)}
className={cx(styles.tab, {
[styles.active]: activeIndex === i && !isDisabled,
[styles.disabled]: disabled.includes(e.label)
})}
>
<span className={styles.label}>{e.label}</span>
</div>
);
});
};
//Get the content of only active tab
const getActiveTab = () => {
const disabled = isTabDisabled(activeIndex);
if (activeIndex > tabs.length || disabled) {
return null;
}
const content = tabs[activeIndex] && tabs[activeIndex].content;
return <div className={styles.content}>{content}</div>;
};
As the tabs can be disabled, we have created this disabledTabsList which will return array of names of disabled tabs.
Then there is this function isTabDisabled which will check if the tab with given index is disabled or not.
Now there are two scenarios for us to handle.
- If the tab is disabled and it is not active then don’t allow to change it.
- Tab is disabled and it is active then don’t show its content.
So while generating the tab list we have added classes according to their current state, Also we are only returning content for tab which are active and are not disabled.
Every time a tab clicked, we check if it is disabled or not and then only return the data to the parent to make sure we don’t mark the disabled ones as active.
Complete code of react tabs component.
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import styles from "./index.module.css";
const Tab = props => {
const { activeIndex, tabs, onChange } = props;
const disabledTabsList = () => {
return tabs.map(e => (e.disabled ? e.label : null));
};
const isTabDisabled = index => {
const disabled = disabledTabsList();
const tab = tabs[index];
return disabled.includes(tab.label);
};
const onClick = i => {
const isDisabled = isTabDisabled(i);
if (!isDisabled) {
onChange(i);
}
};
//Get the list of tab
const generateTabsHeading = () => {
const isDisabled = isTabDisabled(activeIndex);
const disabled = disabledTabsList();
return tabs.map((e, i) => {
return (
<div
key={e.label}
onClick={() => onClick(i)}
className={cx(styles.tab, {
[styles.active]: activeIndex === i && !isDisabled,
[styles.disabled]: disabled.includes(e.label)
})}
>
<span className={styles.label}>{e.label}</span>
</div>
);
});
};
//Get the content of only active tab
const getActiveTab = () => {
const disabled = isTabDisabled(activeIndex);
if (activeIndex > tabs.length || disabled) {
return null;
}
const content = tabs[activeIndex] && tabs[activeIndex].content;
return <div className={styles.content}>{content}</div>;
};
return (
<div className={styles.wrapper}>
<div className={styles.tabsHeading}>{generateTabsHeading()}</div>
<div className={styles.tabsContent}>{getActiveTab()}</div>
</div>
);
};
Tab.propTypes = {
activeIndex: PropTypes.number.isRequired,
tabs: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
content: PropTypes.node.isRequired,
disabled: PropTypes.bool.isRequired
})
).isRequired,
onChange: PropTypes.func.isRequired
};
Tab.defaultProps = {
activeIndex: 0
};
export default Tab;
You can separate the two component tab’s heading and tab’s content and handle them individually by maintain their state with Redux.
This way you can create vertical or horizontal tab.
But our component is horizontal tab so lets do the styling of it.
Complete CSS code for tabs component in react.
//index.module.css
.wrapper {
padding: 10px;
}
.tabsHeading {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
}
.tab {
display: inline-flex;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #000;
padding: 3px 15px;
margin: 0 2px;
line-height: 20px;
transition: all 200ms cubic-bezier(0.4, 0.14, 0.3, 1);
text-transform: capitalize;
border: 1px solid;
cursor: pointer;
}
.tab:hover {
background-color: #e0f7fa;
}
.active {
cursor: pointer;
border-color: #000;
background-color: #3776d1;
color: #fff;
}
.active:hover {
background-color: #3776d1;
}
.disabled {
cursor: not-allowed;
color: #d8d2d2;
}
.disabled:hover {
background-color: transparent;
}
.tabsContent {
padding: 5px 10px;
display: block;
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px;
background-color: #fff;
margin: 23px 0;
}
Input
//test.js
import React, { Component } from "react";
import Tab from "./index";
class TabTest extends Component {
state = {
activeIndex: 0
};
onChange = activeIndex => {
this.setState({
activeIndex
});
};
render() {
const { activeIndex } = this.state;
const tabs = [
{
label: "Tab 1",
content: (
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
<br />
<br />
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more
obscure Latin words, consectetur, from a Lorem Ipsum passage, and
going through the cites of the word in classical literature,
discovered the undoubtable source. Lorem Ipsum comes from sections
1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
of Good and Evil) by Cicero, written in 45 BC. This book is a
treatise on the theory of ethics, very popular during the
Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
amet..", comes from a line in section 1.10.32.
</div>
),
disabled: false
},
{
label: "Tab 2",
content: (
<div>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English. Many desktop publishing
packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web
sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour
and the like).
<br />
<br />
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly
believable. If you are going to use a passage of Lorem Ipsum, you
need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend
to repeat predefined chunks as necessary, making this the first true
generator on the Internet. It uses a dictionary of over 200 Latin
words, combined with a handful of model sentence structures, to
generate Lorem Ipsum which looks reasonable. The generated Lorem
Ipsum is therefore always free from repetition, injected humour, or
non-characteristic words etc.
</div>
),
disabled: false
}
];
return (
<Tab activeIndex={activeIndex} onChange={this.onChange} tabs={tabs} />
);
}
}
export default TabTest;
Output
