With Tabbordion you can make your own components such as Tabs or Accordions! Tabbordion will manage the state while you can focus on doing the styles the way you want.
New in 2020 (version 2.0): complete modernization removing legacy React patterns and legacy browser support. The new code targets evergreen browsers. Tabbordion supported IE8 and Opera Presto in versions prior to 2.0 (since 2015). As a result of these efforts the uncompressed UMD bundle has shrunk from 31kB to 19kB despite added features!
You can also find complete documentation including migration from v1.0 and v0.x.
You choose between class based components which provide an opioned solution, and a React hook that provides more freedom regarding generated HTML structure.
Sample code: uncontrolled componentsimport { Tabbordion, TabPanel, TabLabel, TabContent } from 'react-tabbordion'
const blockElements = {
content: 'tabs-content',
panel: 'tabs-panel',
label: 'tabs-title'
}
<Tabbordion blockElements={blockElements} className="tabs" name="unique-identifier">
<TabPanel>
<TabLabel>My title</TabLabel>
<TabContent>
<h2>Sample</h2>
<p>Content</p>
</TabContent>
</TabPanel>
<TabPanel>
<TabLabel>Another title</TabLabel>
<TabContent>
<h2>Another Sample</h2>
<p>Some other kind of content</p>
</TabContent>
</TabPanel>
</Tabbordion> Output HTML
<ul class="tabs" role="tablist">
<li class="tabs-panel tabs-panel--checked tabs-panel--content tabs-panel--enabled tabs-panel--first">
<input
type="radio"
data-state="tabbordion"
aria-controls="unique-identifier-0-content"
aria-selected="true"
checked
id="unique-identifier-0"
name="unique-identifier"
role="tab"
value="0"
>
<label
class="tabs-title tabs-title--checked tabs-title--content tabs-title--enabled tabs-title--first"
id="unique-identifier-0-label"
for="unique-identifier-0"
>
My title
</label>
<div
aria-hidden="false"
aria-labelledby="unique-identifier-0-label"
class="tabs-content tabs-content--checked tabs-content--content tabs-content--enabled tabs-content--first"
id="unique-identifier-0-content"
role="tabpanel"
tabindex="0"
>
<h2>Sample</h2>
<p>Content</p>
</div>
</li>
<li class="tabs-panel tabs-panel--unchecked tabs-panel--content tabs-panel--enabled tabs-panel--last">
<input
type="radio"
data-state="tabbordion"
aria-controls="unique-identifier-1-content"
aria-selected="false"
id="unique-identifier-1"
name="unique-identifier"
role="tab"
value="1"
>
<label
class="tabs-title tabs-title--unchecked tabs-title--content tabs-title--enabled tabs-title--last"
id="unique-identifier-1-label"
for="unique-identifier-1"
>
Another title
</label>
<div
aria-hidden="true"
aria-labelledby="unique-identifier-1-label"
class="tabs-content tabs-content--unchecked tabs-content--content tabs-content--enabled tabs-content--last"
id="unique-identifier-1-content"
role="tabpanel"
tabindex="-1"
>
<h2>Another Sample</h2>
<p>Some other kind of content</p>
</div>
</li>
</ul>
You don't need to define index props, Tabbordion component will fill those automatically. However it is recommended to define them when using controlled state.
These components generate HTML structure that is convenient to work with in that each panel is individual unit. This makes it possible to easily swap the same HTML structure from tabs to accordion. So you can make the element change appearance based on media queries purely through CSS. As a side-effect it is also entirely possible to style this HTML in CSS-only manner so you would get fully functional tabs even without JS (note that issues with screen readers can't be handled without JavaScript).
Sample code: build your own components with hooksimport React from 'react'
import { useTabbordion } from './react-tabbordion'
const TabbordionContext = React.createContext('tabbordion')
const Tabbordion = React.memo(function Tabbordion({ children, ...props }) {
const tabbordion = useTabbordion(props)
return (
<TabbordionContext.Provider value={tabbordion}>
{children}
</TabbordionContext.Provider>
)
})
const Tabs = React.memo(function Tabs(props) {
const tabbordion = React.useContext(TabbordionContext)
return <ol className="tabs-list" {...props} {...tabbordion.tabList} />
})
const Tab = React.memo(function Tab({ id, tab, ...props }) {
const tabbordion = React.useContext(TabbordionContext)
return (
<li className="tabs-list__item" id={id}>
<button className="tabs-button" {...props} {...tabbordion.tabButton(tab)} />
</li>
)
})
const Panel = React.memo(function Panel({ tab, ...props }) {
const tabbordion = React.useContext(TabbordionContext)
return <div className="tabs-panel" {...props} {...tabbordion.tabPanel(tab)} />
})
export default function UsageDemo() {
return (
<Tabbordion id="unique-identifier" initial="1">
<Tabs aria-label="This is hooks demo">
<Tab tab="1">First tab</Tab>
<Tab tab="2">Second tab</Tab>
</Tabs>
<Panel tab="1">
<h2>First panel</h2>
<p>I have more content than the second panel.</p>
</Panel>
<Panel tab="2">
<p>I have less content.</p>
</Panel>
</Tabbordion>
)
}
With hooks you must always give a unique tab to link the generated tabs and panels. The greatest good part with hooks is the power of customization you have in your fingertips: you can generate all sorts of different HTML structures that fit the requirements you may have. Yet all the hard relations with attributes are handled for you so you don't need to spend all your time learning all the details of WAI ARIA (although a frontend dev is recommended to study them).
npm install react-tabbordion
yarn add react-tabbordion
UMD package is also provided. It provides ReactTabbordion to global in browser.
You may need a polyfill for ResizeObserver API. If you wish to support very old browsers you should use version 1.0.
Once you have cloned the GitHub repo:
You can then run test with yarn test or yarn coverage.
You can also start a demo localhost server using yarn demo, however you must have Deno installed!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4