Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yazaabed/react-tabs
Simple React Tabs using the new react ContextAPI
https://github.com/yazaabed/react-tabs
components react react-tabs reactjs rollup-example state-management storybook tabs
Last synced: 5 days ago
JSON representation
Simple React Tabs using the new react ContextAPI
- Host: GitHub
- URL: https://github.com/yazaabed/react-tabs
- Owner: yazaabed
- Created: 2018-04-18T12:54:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-24T01:34:07.000Z (over 1 year ago)
- Last Synced: 2024-04-27T01:03:32.524Z (7 months ago)
- Topics: components, react, react-tabs, reactjs, rollup-example, state-management, storybook, tabs
- Language: TypeScript
- Homepage: https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js
- Size: 2.04 MB
- Stars: 17
- Watchers: 0
- Forks: 8
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Tabs
> Simple React Tabs using the new react ContextAPI to manage changes active tabs or not. And there is no need to add tabs container you just add a tab component.
[](https://www.npmjs.com/package/@feuer/react-tabs)
[](https://github.com/yazaabed/react-tabs)
[](https://conventionalcommits.org)
[](https://github.com/yazaabed/react-tabs)
[](https://github.com/yazaabed/react-tabs)
[](https://www.npmjs.com/package/@feuer/react-tabs)
# Demo
- For quick demo please checkout this [storybook](https://feuer-ui.netlify.app/).
- For quick code usage pelase checkout this [codesandbox](https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js)
## Introduction
This project done using ReactJS and normal styling to add a small react-tabs component to your project without a huge library.
## Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:
### Yarn
```
yarn add @feuer/react-tabs
```
### Npm
```
npm install @feuer/react-tabs
```
This package also depends on `react`, `tslib` only esm for umd its already included, `react-dom`, `prop-types`. Please make sure you have it installed as well.
## Usage
### [Try it out in the browser](https://codesandbox.io/s/frosty-pond-etcqj?file=/src/App.js)
```jsx
import React from "react";
import { Tabs } from "@feuer/react-tabs";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const LeftTabs = () => (
This is tab 1
This is tab 2
);
```
## Basic Props
This is the list of props that you should probably know about when using react-tabs.
### Tabs Component Props
```javascript
Tabs.propTypes = {
activeTab: {
id: PropTypes.string.isRequired,
},
children: PropTypes.arrayOf(PropTypes.node).isRequired,
tabsProps: {
style: PropTypes.object,
className: PropTypes.string
}
};
```
### Tab Component Props
```javascript
Tab.propTypes = {
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
tabIndex: PropTypes.oneOf([PropTypes.string, PropTypes.number])
};
```
## Contributing
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
## Authors
* **Yazan Aabed**
* See also the list of [contributors](https://github.com/yazaabed/react-tabs/graphs/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details