https://github.com/sequencemedia/react-tab-set
React Tab Set
https://github.com/sequencemedia/react-tab-set
component react tabset
Last synced: 11 months ago
JSON representation
React Tab Set
- Host: GitHub
- URL: https://github.com/sequencemedia/react-tab-set
- Owner: sequencemedia
- Created: 2017-08-28T07:59:28.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2025-07-20T03:11:17.000Z (11 months ago)
- Last Synced: 2025-07-20T05:41:49.357Z (11 months ago)
- Topics: component, react, tabset
- Language: TypeScript
- Homepage: https://github.com/sequencemedia/react-tab-set
- Size: 12.2 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-tab-set
A `React` component for rendering tabbed content.
```jsx
One
Two
One
Two
```
The `` component manages state, and applies additional props to the `` and `` components.
## _TabSet_
Rendered as a `
` the `` component can contain or be contained by an valid children or parent.
A `` has one prop, `selectedTab`. The value of that prop should be the same as the `tab` prop of a `` and its paired ``.
## _TabGroup_ and _Tab_
A `` contains `` components.
These are rendered as `
A `` has no props.
Each `` component has one prop, `tab`. The value of that prop pairs with the `tab` prop of a `` component (such that when a `` is selected with a click, its paired `` is rendered).
## _TabPanel_
A `` is a container for content.
Content can be declared either as children or as the return of a function assigned to its prop `render`.
If your component extends `PureComponent` or is presentational, you might prefer to declare content as children.
Otherwise, you can assign a function to the `render` prop, so that rendering is deferred until the tab is selected.
### Content as children
```jsx
Content
```
### Content as return
```jsx
(
Content
)} />
```
(Notice that in this case there is no closing tag; if there were, children would be ignored in favour of the return from the function, anyway.)
### Presentational elements
A `` component can contain or be contained by an valid children or parent, just like a ``.
```jsx
{ /*
Etc.
*/ }
One
{
return 'Two'
}} />
```
Similarly, they can be declared in any combination.
## Demonstrating _react-tab-set_
[Example `Storybooks` are available](https://github.com/sequencemedia/react-tab-set).
Clone the repository, then:
```bash
npm install
npm run storybook
```
And with your preferred browser visit `http://localhost:6006`.