# react-responsive-tabs > React responsive tabs Latest version **4.4.3** (published 2021-08-11) · MIT license · 0 weekly downloads ## Install ```sh npm install react-responsive-tabs pnpm add react-responsive-tabs yarn add react-responsive-tabs bun add react-responsive-tabs ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.4.3 | | Published | 2021-08-11 | | First published | 2015-11-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 131.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 126 | | Author | Vitalii Maslianok | | Maintainers | maslianok | | Keywords | react, responsive, tabs, tab | ## Links - npm: https://www.npmjs.com/package/react-responsive-tabs - Repository: https://github.com/maslianok/react-responsive-tabs - Issues: https://github.com/maslianok/react-responsive-tabs/issues - npm.io page: https://npm.io/package/react-responsive-tabs ## Dependencies (4) - [classnames](https://npm.io/package/classnames.md) ^2.3.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1 - [react-resize-detector](https://npm.io/package/react-resize-detector.md) ^6.7.5 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 4.4.3 (latest) — 2021-08-11 - 4.4.2 — 2021-08-11 - 4.4.1 — 2021-04-27 - 4.4.0 — 2021-03-20 - 4.3.0 — 2021-02-02 - 4.2.1 — 2021-01-14 - 4.2.0 — 2021-01-13 - 4.1.1 — 2020-08-12 - 4.1.0 — 2020-06-05 - 4.0.1 — 2020-06-05 - 4.0.0 — 2020-06-05 - 3.3.1 — 2020-06-05 - 3.3.0 — 2019-09-18 - 3.2.1 — 2019-09-18 - 3.2.0 — 2019-05-29 - … 42 more at https://npm.io/package/react-responsive-tabs/versions ## README # React responsive tabs #### [Live demo](http://maslianok.github.io/react-responsive-tabs/) ### Your feedback is highly appreciated! Please, file an issue if something went wrong or let me know via Twitter @maslianok #### Responsive - Hide tabs under the 'Show more' option when they don't fit into the screen - Transform tabs into the accordion when the wrapper width reaches the `transformWidth` value ![Responsive tabs](https://cloud.githubusercontent.com/assets/3485490/11324577/f6536f2c-913d-11e5-80b0-8755a2ec11cb.gif) #### Accessible The component outputs HTML code that follows accessibility principles (aka [WAI-ARIA](https://en.wikipedia.org/wiki/WAI-ARIA)) and uses ARIA attributes such as `role`, `aria-selected`, `aria-controls`, `aria-labeledby` etc. ![Accessible tabs](https://cloud.githubusercontent.com/assets/3485490/11324576/f4775a4c-913d-11e5-9ec2-f13beb8bd578.gif) #### Fast We are using [`react-resize-detector`](https://github.com/maslianok/react-resize-detector). No timers. Just pure event-based element resize detection. ## Installation `npm install react-responsive-tabs` ## Demo #### [Live demo](http://maslianok.github.io/react-responsive-tabs/) Local demo ```sh # 1. clone the repository git clone https://github.com/maslianok/react-responsive-tabs.git # 2. Install react-responsive-tabs dependencies. You must do it because we use raw library code in the example cd react-responsive-tabs npm install # 3. Install dependencies to run the example cd examples npm install # 4. Finally run the example npm start ``` ## Example ```javascript import React, { Component } from 'react'; import { render } from 'react-dom'; import Tabs from 'react-responsive-tabs'; // IMPORTANT you need to include the default styles import 'react-responsive-tabs/styles.css'; const presidents = [ { name: 'George Washington', biography: '...' }, { name: 'Theodore Roosevelt', biography: '...' }, ]; function getTabs() { return presidents.map((president, index) => ({ title: president.name, getContent: () => president.biography, /* Optional parameters */ key: index, tabClassName: 'tab', panelClassName: 'panel', })); } const App = () => ; render(, document.getElementById('root')); ``` ## API All entities listed below should be used as props to the `Tabs` component. | Prop | Type | Description | Default | | ---------------- | ------------- | ---------------------------------------------------------------------------- | --------- | | items | Array | Tabs data | [] | | beforeChange | Function | Fires right before a tab changes. Return `false` to prevent the tab change | undefined | | onChange | Function | onChange callback | undefined | | selectedTabKey | Number/String | Selected tab | undefined | | showMore | Bool | Whether to show `Show more` or not | `true` | | showMoreLabel | String/Node | `Show more` tab name | `...` | | transform | Bool | Transform to accordion when the wrapper width is less than `transformWidth`. | `true` | | transformWidth | Number | Transform width. | 800 | | unmountOnExit | Bool | Whether to unmount inactive tabs from DOM tree or not | `true` | | tabsWrapperClass | String | Wrapper class | undefined | | tabClassName | String | Tab class | undefined | | panelClassName | String | Tab panel class | undefined | | allowRemove | Bool | Allows tabs removal. | `false` | | removeActiveOnly | Bool | Only active tab has removal option | `false` | | showInkBar | Bool | Add MaterialUI InkBar effect | `false` | | uid | any | An optional external id. The component rerenders when it changes | undefined | ### License MIT --- _Source: https://npm.io/package/react-responsive-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._