https://github.com/jeetiss/tabs

React tabs with hooks
https://github.com/jeetiss/tabs

hooks react tabs

Last synced: about 1 month ago
JSON representation

React tabs with hooks

• Host: GitHub
• URL: https://github.com/jeetiss/tabs
• Owner: jeetiss
• Created: 2019-07-13T13:39:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-03T12:10:43.000Z (about 2 months ago)
• Last Synced: 2024-10-06T10:30:52.858Z (about 2 months ago)
• Topics: hooks, react, tabs
• Language: JavaScript
• Homepage: https://jeetiss.github.io/tabs/
• Size: 3.17 MB
• Stars: 208
• Watchers: 10
• Forks: 30
• 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

  

);

```