{"id":22451437,"url":"https://github.com/maslianok/react-responsive-tabs","last_synced_at":"2025-04-05T17:05:24.317Z","repository":{"id":38291264,"uuid":"45386617","full_name":"maslianok/react-responsive-tabs","owner":"maslianok","description":"React responsive tabs http://maslianok.github.io/react-responsive-tabs/","archived":false,"fork":false,"pushed_at":"2023-01-07T04:10:58.000Z","size":4441,"stargazers_count":126,"open_issues_count":25,"forks_count":33,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T16:04:19.759Z","etag":null,"topics":["accordion","react","responsive","tabs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maslianok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-02T10:05:43.000Z","updated_at":"2025-01-16T06:31:47.000Z","dependencies_parsed_at":"2023-02-06T11:31:12.932Z","dependency_job_id":null,"html_url":"https://github.com/maslianok/react-responsive-tabs","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maslianok%2Freact-responsive-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maslianok%2Freact-responsive-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maslianok%2Freact-responsive-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maslianok%2Freact-responsive-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maslianok","download_url":"https://codeload.github.com/maslianok/react-responsive-tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369952,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","react","responsive","tabs"],"created_at":"2024-12-06T06:07:56.035Z","updated_at":"2025-04-05T17:05:24.287Z","avatar_url":"https://github.com/maslianok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React responsive tabs\n\n#### [Live demo](http://maslianok.github.io/react-responsive-tabs/)\n\n### Your feedback is highly appreciated!\n\nPlease, file an issue if something went wrong or let me know via Twitter @maslianok\n\n#### Responsive\n\n- Hide tabs under the 'Show more' option when they don't fit into the screen\n- Transform tabs into the accordion when the wrapper width reaches the `transformWidth` value\n\n![Responsive tabs](https://cloud.githubusercontent.com/assets/3485490/11324577/f6536f2c-913d-11e5-80b0-8755a2ec11cb.gif)\n\n#### Accessible\n\nThe 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.\n\n![Accessible tabs](https://cloud.githubusercontent.com/assets/3485490/11324576/f4775a4c-913d-11e5-9ec2-f13beb8bd578.gif)\n\n#### Fast\n\nWe are using [`react-resize-detector`](https://github.com/maslianok/react-resize-detector). No timers. Just pure event-based element resize detection.\n\n## Installation\n\n`npm install react-responsive-tabs`\n\n## Demo\n\n#### [Live demo](http://maslianok.github.io/react-responsive-tabs/)\n\nLocal demo\n\n```sh\n# 1. clone the repository\ngit clone https://github.com/maslianok/react-responsive-tabs.git\n\n# 2. Install react-responsive-tabs dependencies. You must do it because we use raw library code in the example\ncd react-responsive-tabs\nnpm install\n\n# 3. Install dependencies to run the example\ncd examples\nnpm install\n\n# 4. Finally run the example\nnpm start\n```\n\n## Example\n\n```javascript\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport Tabs from 'react-responsive-tabs';\n\n// IMPORTANT you need to include the default styles\nimport 'react-responsive-tabs/styles.css';\n\nconst presidents = [\n  { name: 'George Washington', biography: '...' },\n  { name: 'Theodore Roosevelt', biography: '...' },\n];\n\nfunction getTabs() {\n  return presidents.map((president, index) =\u003e ({\n    title: president.name,\n    getContent: () =\u003e president.biography,\n    /* Optional parameters */\n    key: index,\n    tabClassName: 'tab',\n    panelClassName: 'panel',\n  }));\n}\n\nconst App = () =\u003e \u003cTabs items={getTabs()} /\u003e;\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n## API\n\nAll entities listed below should be used as props to the `Tabs` component.\n\n| Prop             | Type          | Description                                                                  | Default         |\n| ---------------- | ------------- | ---------------------------------------------------------------------------- | --------------- |\n| items            | Array         | Tabs data                                                                    | [Item](#Item)[] |\n| beforeChange     | Function      | Fires right before a tab changes. Return `false` to prevent the tab change   | undefined       |\n| onChange         | Function      | onChange callback                                                            | undefined       |\n| selectedTabKey   | Number/String | Selected tab                                                                 | undefined       |\n| showMore         | Bool          | Whether to show `Show more` or not                                           | `true`          |\n| showMoreLabel    | String/Node   | `Show more` tab name                                                         | `...`           |\n| transform        | Bool          | Transform to accordion when the wrapper width is less than `transformWidth`. | `true`          |\n| transformWidth   | Number        | Transform width.                                                             | 800             |\n| unmountOnExit    | Bool          | Whether to unmount inactive tabs from DOM tree or not                        | `true`          |\n| tabsWrapperClass | String        | Wrapper class                                                                | undefined       |\n| tabClassName     | String        | Tab class                                                                    | undefined       |\n| panelClassName   | String        | Tab panel class                                                              | undefined       |\n| allowRemove      | Bool          | Allows tabs removal.                                                         | `false`         |\n| removeActiveOnly | Bool          | Only active tab has removal option                                           | `false`         |\n| showInkBar       | Bool          | Add MaterialUI InkBar effect                                                 | `false`         |\n| uid              | any           | An optional external id. The component rerenders when it changes             | undefined       |\n\n#### Item\n\n| Prop           | Type     | Description                                                                                                                                                      |\n| -------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| title          | String   | Tab title                                                                                                                                                        |\n| getContent     | Function | A function that returns data that will be rendered when tab become active                                                                                        |\n| content        | String   | Use this prop insted of getContent. This is a sync version of `getContent`. The data will be always rendered in a hidden div. Sometimes it may be useful for SEO |\n| key            | Number   | A uniq tab id                                                                                                                                                    |\n| tabClassName   | String   | Tab class name                                                                                                                                                   |\n| panelClassName | String   | Panel class name                                                                                                                                                 |\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaslianok%2Freact-responsive-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaslianok%2Freact-responsive-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaslianok%2Freact-responsive-tabs/lists"}