react-tab

state-aware tab components in react built with Next.js useRouter() hook.

Why?

This started off from working with the Tab component in ChakraUI. Although, there's a "managing active tab state" section in their docs and that may suffice for some of your use-cases.

With react-tabs, you might not need to write the logic to manage just the active state of your tab items or use a state management library. The state of the tab component is preserved in the browser URL when you switch between routes.

Say, for example, there are four tabItems, you procced to select the second tab item and navigate to another route or you refresh the current page, React re-renders the component and the state is lost, hence the active component goes back to being the first tabItem.

This becomes an issue when you're working in large applications, where tiny details — like preserving the tab state — that improves the overall UX of your app depends on these side effects.

The browser URL can be used as a global state store which we'll use to keep the state of this component.

Usage

Currently, react-tab has support for barebones react projects — that do not depend on a component UI library like Chakra UI etc. —

Support for chakra-ui is going on though. It should be live soon — or never. it all depends on the bandwidth i can give to it 🥲

To use the component, you can install it with your preferred package manager. The command below ascertains that.

yarn add react-tab-state

The component expects you to have an array of tabItems you wish to render, something like the one below;

import React from "react";

const Component = ({ text: string }) => <h1>{text}</h1>;

export const data = [
  {
    name: "first tab",
    component: <Component text="Component One" />,
  },
  {
    name: "second tab",
    component: <Component text="Component Two" />,
  },
  {
    name: "third tab",
    component: <Component text="Component Three" />,
  },
];

It should have the name and component properties in it. The way you chose to structure it is completely up to you. But, it is important that you pass an array of objects to the tabItems props like so:

import { Tab } from "react-tab-state";

export default function HomePage() {
  return (
    <>
      <Tab tabItems={data} />
    </>
  );
}

Because you might wan to customize the look and feel of tabHeader. react-tab exposes a theme prop that accepts any color as a string depending on the design tokens that you're working with.

<Tab tabItems={data} theme="brown" />

perks

• state preservation any tabItem when you navigate away from and back to the current route.
• you can copy the link in the URL share it and the state is shared across devices
• I can't remember the last one....

setbacks

Because, the component uses next/router when you try using it outside of a Next.js project, you'll get an error indicating that "NextRouter is not mounted".

Support for react projects without Next.js should be up soon.

Want to contribute?

See the CONTRIBUTING guide.