https://github.com/jeetiss/tabs
React tabs with hooks
https://github.com/jeetiss/tabs
hooks react tabs
Last synced: 6 months ago
JSON representation
React tabs with hooks
- Host: GitHub
- URL: https://github.com/jeetiss/tabs
- Owner: jeetiss
- Created: 2019-07-13T13:39:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T22:14:51.000Z (6 months ago)
- Last Synced: 2025-04-01T01:42:39.980Z (6 months ago)
- Topics: hooks, react, tabs
- Language: JavaScript
- Homepage: https://jeetiss.github.io/tabs/
- Size: 3.1 MB
- Stars: 208
- Watchers: 9
- Forks: 29
- Open Issues: 23
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
Awesome Lists containing this project
README
# @bumaga/tabs
Headless tabs component for React
## Features
- 📦 super small, 381 B vs 3.5kB [react-tabs](https://github.com/reactjs/react-tabs)
- 🚫 no styles, just logic. Style what you want, as you want
- 🎣 components and hooks API
## Install
```
npm install @bumaga/tabs
```
```
yarn add @bumaga/tabs
```
## Usage
### With components
```jsx
import React from 'react'
import { Tabs, Tab, Panel } from '@bumaga/tabs'
export default () => (
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
panel 3
);
```
### With hooks
```jsx
import React from "react";
import { Tabs, useTabState, usePanelState } from "@bumaga/tabs";
const Tab = ({ children }) => {
const { onClick } = useTabState();
return {children};
};
const Panel = ({ children }) => {
const isActive = usePanelState();
return isActive ?
{children}
: null;
};
export default () => (
Tab 1
Tab 2
Panel 1
Panel 2
);
```