https://github.com/bsonntag/react-tabs
Flexible tab components for react
https://github.com/bsonntag/react-tabs
react react-tabs tabs
Last synced: 10 months ago
JSON representation
Flexible tab components for react
- Host: GitHub
- URL: https://github.com/bsonntag/react-tabs
- Owner: bsonntag
- License: mit
- Created: 2018-04-30T18:59:00.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T00:46:59.000Z (over 1 year ago)
- Last Synced: 2025-03-25T05:51:17.013Z (11 months ago)
- Topics: react, react-tabs, tabs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@bsonntag/react-tabs
- Size: 756 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @bsonntag/react-tabs
[](https://circleci.com/gh/bsonntag/react-tabs)
Flexible tab components for react.
## Installation
Using npm:
```sh
$ npm install --save @bsonntag/react-tabs
```
Using yarn:
```sh
$ yarn add @bsonntag/react-tabs
```
This module uses react's `createContext` API,
so make sure you have at least version 16.3.0 installed.
## Example usage
```js
import { Tab, TabPanel, Tabs } from '@bsonntag/react-tabs';
import React, { Component } from 'react';
class App extends Component {
state = {
selectedTab: 0
};
handleSelect = selectedTab => this.setState({ selectedTab });
render() {
return (
-
{'First tab'}
-
{'Second tab'}
{({ select }) => (
)}
{({ select }) => (
)}
{isSelected => isSelected && (
{'First tab content'}
)}
{isSelected => isSelected && (
{'Second tab content'}
)}
);
}
}
```
## Components
This module contains three components.
### <Tabs />
Works mainly as a provider. It only renders its children.
This is a
[controlled component](https://reactjs.org/docs/forms.html#controlled-components),
so you'll have to save the selected tab on another component's state.
#### children: `React$Node`
This component only renders its children.
#### onSelect: `(tab: string | number) => void`
The event handler that is called when a tab is selected.
This is called with the selected tab.
#### selectedTab: `string | number`
The currently selected tab.
### <Tab />
#### children: `(args: { isSelected: boolean, select: () => void }) => React$Node`
This component receives a function as its children.
It calls the children function with an object with two properties:
- `isSelected`: this will be true if the tab is selected.
- `select`: a function to call when this tab is selected.
This component will render the result of calling its children.
#### tab: `string | number`
This tab's identifier.
### <TabPanel />
#### children: `(isSelected: boolean) => React$Node`
This component receives a function as its children.
It calls the children function with an a boolean
that will be true if the tab is selected.
This component will render the result of calling its children.
#### tab: `string | number`
This tab's identifier.
## Contributing
Please feel free to submit any issues or pull requests.
## License
MIT