https://github.com/kaf-lamed-beyt/react-tab
Tab component states in the browser's URL.
https://github.com/kaf-lamed-beyt/react-tab
nextjs react state-management tabs tabs-widget
Last synced: about 2 months ago
JSON representation
Tab component states in the browser's URL.
- Host: GitHub
- URL: https://github.com/kaf-lamed-beyt/react-tab
- Owner: kaf-lamed-beyt
- License: mit
- Created: 2023-06-11T12:32:13.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-28T08:16:13.000Z (about 1 year ago)
- Last Synced: 2025-03-10T17:07:56.660Z (about 2 months ago)
- Topics: nextjs, react, state-management, tabs, tabs-widget
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-tab-state
- Size: 409 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```bash
yarn add react-tab-state
```
The component expects you to have an array of `tabItems` you wish to render, something like the one below;
```tsx
import React from "react";
const Component = ({ text: string }) =>
{text}
;
export const data = [
{
name: "first tab",
component: ,
},
{
name: "second tab",
component: ,
},
{
name: "third tab",
component: ,
},
];
```
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:
```tsx
import { Tab } from "react-tab-state";
export default function HomePage() {
return (
<>
>
);
}
```
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.
```tsx
```
## 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](CONTRIBUTING) guide.