{"id":20638897,"url":"https://github.com/merri/react-tabbordion","last_synced_at":"2025-08-21T18:33:36.433Z","repository":{"id":34162899,"uuid":"38006484","full_name":"Merri/react-tabbordion","owner":"Merri","description":"Universal, semantic and CSS-only supporting React state managing components for creating Accordions and Tabs","archived":false,"fork":false,"pushed_at":"2023-01-06T01:33:58.000Z","size":1576,"stargazers_count":80,"open_issues_count":21,"forks_count":11,"subscribers_count":3,"default_branch":"v1","last_synced_at":"2024-12-12T00:18:03.910Z","etag":null,"topics":["accessibility","accordion","react","react-component","react-components","reactjs","tabs"],"latest_commit_sha":null,"homepage":"https://merri.github.io/react-tabbordion/","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/Merri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-06-24T19:32:18.000Z","updated_at":"2024-08-18T06:46:43.000Z","dependencies_parsed_at":"2023-01-15T05:15:34.704Z","dependency_job_id":null,"html_url":"https://github.com/Merri/react-tabbordion","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-tabbordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-tabbordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-tabbordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-tabbordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Merri","download_url":"https://codeload.github.com/Merri/react-tabbordion/tar.gz/refs/heads/v1","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230527866,"owners_count":18240051,"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":["accessibility","accordion","react","react-component","react-components","reactjs","tabs"],"created_at":"2024-11-16T15:20:32.872Z","updated_at":"2024-12-20T03:10:12.663Z","avatar_url":"https://github.com/Merri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tabbordion\n[![Version](https://img.shields.io/npm/v/react-tabbordion/latest)](https://www.npmjs.org/package/react-tabbordion)\n[![NPM-Size](https://img.shields.io/bundlephobia/minzip/react-tabbordion@latest)](https://www.npmjs.com/package/react-tabbordion)\n[![Build Status](https://img.shields.io/travis/merri/react-tabbordion/v1)](https://travis-ci.org/Merri/react-tabbordion)\n\n\u003e Version 2.0 is now on beta, check it out!\n\u003e\n\u003e `npm install react-tabbordion@beta`\n\u003e\n\u003e For more information see [v2 branch @ GitHub](https://github.com/Merri/react-tabbordion/tree/v2)\n\n**Tabbordion** is a component for managing active state between multiple items. You can make anything out of it:\n\n- Tabs component\n- Accordion component\n- Multi select list component\n- Option component\n- List of options\n- List of checkboxes\n\nEssentially Tabbordion handles the state, gives tools for complete CSS based styling, manages WAI ARIA and provides a\ngreat HTML/DOM structure to work with. Tabbordion is universal and therefore works both server side and client side!\n\nKeyboard usage works just like with radio buttons (or checkboxes when using `multiple` mode); the component avoids\nreinventing the wheel and takes advantage of native browser behavior where possible, which is why you can't see any code\nrelated to keyboard handling despite arrow keys and smart focus behavior being fully supported.\n\nYou have complete control over the generated classNames, you can even disable generating them if you wish to. There is\nonly one required style:\n\n```css\n[data-state=\"tabbordion\"] {\n    clip: rect(0 0 0 0);\n    height: 1px;\n    position: absolute;\n    position: fixed;\n    width: 1px;\n    z-index: -1;\n}\n```\n\nThis will hide the input elements so that they remain accessible via keyboard on all browsers.\n\n\n## What is new with v1.0?\n\n- You can now make Tabbordion stateless, thus place the state where you want!\n- Full state control: Tabbordion makes sure the state is correct for given mode.\n- Viewport resize support: when using `animateContent` elements are now updated when window is resized.\n- `bemClassName` is now exposed.\n- Performance optimizations for minimal renders. All Tabbordion components now extend PureComponent.\n\n\n## Demo, Documentation and Installation\n\nView [Tabbordion demo](https://merri.github.io/react-tabbordion/) or [Documentation](./docs/).\n\n```\nnpm install react-tabbordion\n```\n\n[You're welcome to steal the demo styles](./demo/). Also, throw an issue if you have suggestions for improvements or\nfind problems with the demo styles :)\n\n\n### Usage example and sample output\n\n```jsx\nimport { Tabbordion, TabPanel, TabLabel, TabContent } from 'react-tabbordion'\n\nconst blockElements = {\n    content: 'tabs-content',\n    panel: 'tabs-panel',\n    label: 'tabs-title'\n}\n\n\u003cTabbordion blockElements={blockElements} className=\"tabs\" name=\"tabs\"\u003e\n    \u003cTabPanel\u003e\n        \u003cTabLabel\u003eMy title\u003c/TabLabel\u003e\n        \u003cTabContent\u003e\n            \u003ch2\u003eSample\u003c/h2\u003e\n            \u003cp\u003eContent\u003c/p\u003e\n        \u003c/TabContent\u003e\n    \u003c/TabPanel\u003e\n    \u003cTabPanel\u003e\n        \u003cTabLabel\u003eAnother title\u003c/TabLabel\u003e\n        \u003cTabContent\u003e\n            \u003ch2\u003eAnother Sample\u003c/h2\u003e\n            \u003cp\u003eSome other kind of content\u003c/p\u003e\n        \u003c/TabContent\u003e\n    \u003c/TabPanel\u003e\n\u003c/Tabbordion\u003e\n```\n\n**Output:**\n\n```html\n\u003cul role=\"tablist\" class=\"tabs\"\u003e\n    \u003cli aria-expanded=\"true\" aria-selected=\"true\" class=\"tabs-panel tabs-panel--checked tabs-panel--content tabs-panel--first\" role=\"tab\"\u003e\n        \u003cinput aria-controls=\"panel-tabs-0\" checked data-state=\"tabbordion\" id=\"tabs-0\" name=\"tabs\" value=\"0\" type=\"radio\" /\u003e\n        \u003clabel class=\"tabs-title tabs-title--checked tabs-title--content tabs-title--first\" id=\"label-tabs-0\" for=\"tabs-0\"\u003e\n            My title\n        \u003c/label\u003e\n        \u003cdiv aria-labelledby=\"tabs-0\" class=\"tabs-content tabs-content--checked tabs-content--first\" id=\"panel-tabs-0\" role=\"tabpanel\"\u003e\n            \u003ch2\u003eSample\u003c/h2\u003e\n            \u003cp\u003eContent\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli aria-expanded=\"false\" aria-selected=\"false\" class=\"tabs-panel tabs-panel--unchecked tabs-panel--content tabs-panel--last\" role=\"tab\"\u003e\n        \u003cinput aria-controls=\"panel-tabs-1\" data-state=\"tabbordion\" id=\"tabs-1\" name=\"tabs\" value=\"1\" type=\"radio\" /\u003e\n        \u003clabel class=\"tabs-title tabs-title--unchecked tabs-title--content tabs-title--last\" id=\"label-tabs-1\" for=\"tabs-1\"\u003e\n            Another title\n        \u003c/label\u003e\n        \u003cdiv aria-labelledby=\"tabs-1\" class=\"tabs-content tabs-content--unchecked tabs-content--last\" id=\"panel-tabs-1\" role=\"tabpanel\"\u003e\n            \u003ch2\u003eAnother Sample\u003c/h2\u003e\n            \u003cp\u003eSome other kind of content\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nThe first tab is open as `single` mode is the default setting. If another mode is set then no tabs will be open unless\n`initialPanels` is given.\n\n\n## Developing\n\n```\nnpm install\nnpm run build\nnpm test\n```\n\nThere is no development environment provided that you could run in your localhost. I'm a bit old fashioned here, being\nable to write things without all the cool tools. Sorry for being such a guy.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Freact-tabbordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerri%2Freact-tabbordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Freact-tabbordion/lists"}