https://github.com/lukehansell/react-tabs

simple React tabs #breakableToys #jest #storybook #TDD
https://github.com/lukehansell/react-tabs

Last synced: about 1 month ago
JSON representation

simple React tabs #breakableToys #jest #storybook #TDD

• Host: GitHub
• URL: https://github.com/lukehansell/react-tabs
• Owner: lukehansell
• Created: 2020-01-10T16:56:37.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T05:00:19.000Z (about 2 years ago)
• Last Synced: 2023-02-28T00:26:27.632Z (almost 2 years ago)
• Language: JavaScript
• Size: 4.16 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tabs

#breakableToys #tabs #react #react #storybook #jest

React tabs implementation

## Usage

```

+-TabContainer---+

| +-Tab--------+ |

| | content    | |

| +------------+ |

| +-Tab--------+ |

| | content    | |

| +------------+ |

+----------------+

```

### Components

#### TabContainer

Accepts Tabs as children and manages the state of which tab is open

#### Tab

Tab element to be nested inside a tab container

##### props

- title - string - the text for the tab header

- isActive - boolean - is this the active tab?

#### TabHeader

Automatically created by the TabContainer for each Tab element given

#### props

- onClick - function - handler for when the element is clicked

### Rules & Behavior

- Only one tab can be displayed at a time

- If only one tab is provided

  - then it is always displayed

- If multiple tabs are provided

  - the first tab is displayed by default

- When a tab is clicked on

  - then content for the selected tab is displayed

  - all other tabs are not displayed