react-tabbed-area

Easy to use tabbing component for React

Installation

npm install react-tabbed-area

Usage

An example of basic usage, tabs on top with some simple content

import React, { useState } from "react";
import TabbedArea from "react-tabbed-area";

const MyContent = () => {
  const tabs = ["Tab 1", "Tab 2", "Tab 3"];
  const [selectedTab, setSelectedTab] = useState(tabs[0]);

  return (
    <TabbedArea
      tabs={tabs}
      selectedTab={selectedTab}
      onSelectTab={(tab) => setSelectedTab(tab)}
    >
      {selectedTab === "Tab 1" ? (
        <>Tab One Content</>
      ) : selectedTab === "Tab 2" ? (
        <>Tab Two Content</>
      ) : selectedTab === "Tab 3" ? (
        <>Tab Three Content</>
      ) : null}
    </TabbedArea>
  );
};

Props

Prop Name	Description	Example Values
tabs	Array of tab names, or Array of Objects with the following properties: name, icon, hideName. Tab names must be unique to each TabbedArea	["Tab 1", "Tab 2"], [{name: "Tab 1", icon: , hideName: true}, {name: "Tab 2"}]
selectedTab	string or object with a name property. This item should use the state of your parent component to force the rerender upon tab switch
onSelectTab	callback function passed when a user clicks a tab, will pass back the tab name or entire tab object. Use this to set the state of selectedTab	(tab) => setSelectedTab(tab)
children	any content that you wish to display within the tabbed area. Use a check for the selectedTab to display different content for each tab	Any Component(s)
tabPlacement	the position of the tabs, either "top", "left", or "right", default is "top"
backgroundColor	the main background color of the tabbed area and the selected tab	any hex or html color
color	the main text color for the selected tab	any hex or html color
inactiveBackgroundColor	the background color of a tab when it is inactive	any hex or html color
inactiveTextColor	the color of the text on a tab when it is inactive	any hex or html color
hoverBackgroundColor	the background color of a tab when it is not selected and is hovered over	any hex or html color
hoverTextColor	the text color of a tab when it is not selected and is hovered over	any hex or html color

Using a custom component for the tab name

Rather than pass an array of strings as your tabs you can use an array of objects. This will allow you to provide icons or simply a custom component as the label for each tab.

If using the object method you must include the name property in each tab, as that is how the selectedTab check will be performed. Other available properties include icon, which is where you will provide your custom component, and hideName, a self explanatory boolean.

You are able to pass any combination of text or objects to the tabs prop. Below is an example of using an image as the first tab label, but regular text as the second label, with some custom coloring.

You will need to use a slightly more complex selectedTab checking function to render your content correctly.

import React, { useState } from "react";
import TabbedArea from "react-tabbed-area";

const MyContent = () => {
  const tabs = [
    {
      name: "Tab 1",
      icon: (
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png"
          width={35}
          height={25}
        />
      ),
      hideName: true,
    },
    "Tab 2",
  ];
  const [selectedTab, setSelectedTab] = useState(tabs[0]);

  const isSelected = (tab) => {
    const tabName = selectedTab.name || selectedTab;
    return tabName === tab;
  };

  return (
    <TabbedArea
      tabs={tabs}
      selectedTab={selectedTab}
      onSelectTab={(tab) => setSelectedTab(tab)}
    >
      {isSelected("Tab 1") ? (
        <>Tab One Content</>
      ) : selectedTab === "Tab 2" ? (
        <>Tab Two Content</>
      ) : null}
    </TabbedArea>
  );
};