Need help with tabs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jeetiss
163 Stars 31 Forks 202 Commits 27 Opened issues

Description

React tabs with hooks

Services available

!
?

Need anything else?

Contributors list

# 26
netlify
TypeScr...
GraphQL
javascr...
137 commits
# 47,936
React
Markdow...
TypeScr...
reactjs
43 commits
# 258,452
CSS
bem
React
bem-met...
1 commit
# 385,601
Shell
test-fr...
mocha
CSS
1 commit

@bumaga/tabs

Headless tabs component for React

Features

  • 📦 super small, 381 B vs 3.5kB 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

import React from 'react'
import { Tabs, Tab, Panel } from '@bumaga/tabs' 

export default () => (

Tab 1 Tab 2 Tab 3

<panel><p>Panel 1</p></panel>
<panel><p>Panel 2</p></panel>
<panel><p>panel 3</p></panel>
);

With hooks

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>Panel 1</panel>
<panel>Panel 2</panel>
);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.