A fully accessible, extravagantly flexible, React-powered Tab Panel component

Last update: Aug 7, 2022

react-aria-tabpanel Build Status


SEEKING CO-MAINTAINERS! Continued development of this project is going to require the work of one or more dedicated co-maintainers (or forkers). If you're interested, please comment in this issue.


A React component that helps you build accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design Pattern.

Please check out the demo.

Project Goal

A React component that provides a style- and markup-agnostic foundation for fully accessible tab panels. You provide the inner elements: this module gives you "smart" wrapper components that will handle keyboard interactions and ARIA attributes.

If you think that this component could be even more accessible, please file an issue.

If you like this kind of module (accessible, flexible, unstyled, with framework-agnostic low-level modules) you should also check out these projects:

Installation

npm install react-aria-tabpanel

Dependencies:

The modular approach of this library means you're much better off building it into your code with a module bundling system like browserify or webpack.

But if you need a UMD version (which will include focus-group, but of course not React), you can get it via npmcdm at https://unpkg.com/[email protected][version-of-choice]/umd/ariaTabPanel.js. If you don't know about unpkg, read about it here.

Usage

var AriaTabPanel = require('react-aria-tabpanel');

// Now use AriaTabPanel.Wrapper, AriaTabPanel.TabList,
// AriaTabPanel.Tab, and AriaTabPanel.TabPanel ...

Examples

Have a look at the code in demo/js/ for varied examples.

API

The AriaTabPanel object exposes four components: Wrapper, TabList, Tab, and TabPanel. Each of these is documented below.

TabList, Tab, and TabPanel must always be wrapped in a Wrapper.

Wrapper

A simple component to group a TabList/Tab/TabPanel set, coordinating their interactions. It should wrap your entire tab panel widget.

All TabList, Tab, and TabPanel components must be nested within a Wrapper component.

Each wrapper should contain only one TabList, multiple Tabs, and multiple TabPanels.

props

All props are optional.

onChange { Function }: A callback to run when the user changes tabs (i.e. clicks a tab or navigates to another with the arrow keys). It will be passed the the newly activated tab's ID.

By default, the tabs maintain state internally. Use this prop to make the tabs "stateless," and take control yourself. You can run any arbitrary code when the user performs an action that indicates a tab change (e.g. change your route and update a store, etc.).

Stateless tabs may make sense if you want to manage the tab's state in a Redux store, for example.

letterNavigation { Boolean }: If true, the tabs can be navigated not only by arrow keys, but also by letters. This library uses focus-group, so you can read about how letter-key navigation in that module's "String Searching" docs.

activeTabId { String }: Directly tell the tabs which one is active. By default, the first tab provided will be the initially active tab, and from then on the active tab state is managed internally. This prop, then, can be used two ways:

  • to give the tabs an initial active tab other than the first, or
  • if you have seized control of the state (via an onChange function), to continuously tell the tabs which one is active.

tag { String }: The HTML tag for this element. Default: 'div'.

Any additional props (e.g. id, className, data-whatever) are passed directly to the HTML element.

TabList

Wrap the Tabs with a TabList.

A TabList's children should be React elements.

props

All props are optional.

tag { String }: The HTML tag for this element. Default: 'div'.

role { String }: The role attribute for the element. Default: 'tablist'. The parameter is useful when you have want the same interaction as tabs but want screen readers to describe the content differently.

Any additional props (e.g. id, className, data-whatever) are passed directly to the HTML element, unless TabList needs them itself.

Tab

The active tabs is focusable. Inactive tabs are not.

You can switch from one tab to another by clicking with the mouse or using the arrow keys.

A Tab's children may be any of the following:

  • A string
  • A React element
  • A function accepting the following tab-state object:
    {
      isActive: Boolean // self-explanatory
    }

props

All props are optional except id.

id { String } Required. The id attribute for this element and the identifier that ties this Tab to its TabPanel (so there should be a TabPanel component with a matching tabId).

active { Boolean }: If you are controlling the state yourself (with an onChange function on your Wrapper), use this prop to tell the Tab whether it is active or not.

letterNavigationText { String }: If you are using letter-key navigation (having turned it on via the prop on Wrapper), you can use this prop to specify this Tabs's searchable text. By default, the element's textContent is used — which is usually what you want.

tag { String }: The HTML tag for this element. Default: 'div'.

role { String }: The role attribute for the element. Default: 'tab'. The parameter is useful when you have want the same interaction as tabs but want screen readers to describe the content differently.

Any additional props (e.g. className, data-whatever) are passed directly to the HTML element, unless Tab needs them itself.

TabPanel

The content area for your tabs. The active tab panel is visible; the inactive tab panels are not.

A TabPanels's children may be any of the following:

  • A string
  • A React element
  • A function accepting the following panel-state object:
    {
      isActive: Boolean // self-explanatory
    }

props

All props are optional except tabId.

tabId { String }: Required. The id of the Tab that corresponds to this TabPanel.

active { Boolean }: If you are controlling the state yourself (with an onChange function on your Wrapper), use this prop to tell the TabPanel whether it is active or not.

tag { String }: The HTML tag for this element. Default: 'div'.

role { String }: The role attribute for the element. Default: 'tabpanel'. The parameter is useful when you have want the same interaction as tabs but want screen readers to describe the content differently.

Any additional props (e.g. className, data-whatever) are passed directly to the HTML element, unless TabPanel needs them itself.

Contributing & Development

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Lint with npm run lint.

Test with npm run test-dev, which will give you a URL to open in your browser. Look at the console log for TAP output.

Tests

The demo serves for integration testing. If you'd like to help write decent automated tests, please file a PR.

GitHub

https://github.com/davidtheclark/react-aria-tabpanel/
Comments
  • 1. Issue #23 Bug Fix

    @davidtheclark Fixing of bug found when adding tabs dynamically the user is unable to focus the first tab. During fix, also found bug when the focused tab is changed via state without clicking/focusing a tab, the previously focused tab cannot be clicked. All fixes revolved around needing to set the active tab via the manager when these changes happen.

    Tab.js Added active flag to aid in setting the active tab in the manager.

    createManager.js By passing the active flag from Tab.js, now we can check this whenever a new tab is added and set appropriately.

    • Line 52 sets the default for activeTabId to whatever is already stored locally.
    • Line 54 checks to see if there was anything set locally or if the new tab is active and is not the locally stored active tab, and then handles accordingly.

    I also found a bug that when the active tab is controlled by the parent's state and is changed without clicking a tab, the previously active tab was not able to be clicked. I addressed this in Wrapper.js by doing the following:

    Wrapper.js Added componentDidUpdate and checked against the following:

    • previous activeTabId still matches the manager's activeTabId
    • new activeTabId (this.props.activeTabId) does not match the previous activeTabId

    If these conditions are true, then that means nothing has told the manager to update the active tab, and I call the manager's activateTab method with the new activeTabId.

    Please let me know if anything needs to be addressed with this approach. This is my first pull request, so any constructive feedback you have will be helpful. Thanks for letting me contribute to your project!

    Reviewed by danielyearwood at 2018-05-07 13:15
  • 2. change tab trigger re-rendering

    Hello David, Im facing an issue when i'm navigating into another tab, image on the next tab will be re-rendering. its happening everytime i moved into that tab... Any idea? @davidtheclark

    Reviewed by adrianha at 2016-05-20 07:05
  • 3. Unable to Change to First Tab When Dynamically Adding Tabs

    Let's say I've started my tabs with just one tab. A user of my app triggers some action that adds another tab on the fly and sets the new tab to active. When I try to click the first tab the onChange event never fires and I'm unable to view the first tab. If I click the newly created tab first and then click the first tab, it then fires the onChange event and switches to the first tab. This happens even after I've created multiple tabs. Does this package support adding/removing tabs dynamically as I've described?

    Thanks for all the awesomeness you've created here.

    Reviewed by danielyearwood at 2018-04-19 10:43
  • 4. Add role as one of props

    Recently, I work on accessibility of my project and we have some needs to customize how the windows narrator speak the aria-label. In some cases, it will be nice if we can set other role for the element on focus.

    Reviewed by nickyang07 at 2018-05-03 00:28
  • 5. Suggesting to remove the divs inside the
  • Hello this is a suggestion. Why is there 2 divs inside of each li ? Couldn't it be cleaner ? Maybe we could apply the active class to the li directly ? Do you think this could be possible to achieve in some way ?

    Reviewed by eguyot at 2017-12-04 10:46
  • 6. Does not render isomorphically

    Hi nice build, but it does not render isomorphically.. the document is not available when rendering serverside. CreateManager is called on componentWillMount which calls focus-group. Consider using componentDidMount which is called client side only.

    https://facebook.github.io/react/docs/component-specs.html

    react-aria-tabpanel/node_modules/focus-group/index.js:18
      document.addEventListener('keydown', this._boundHandleKeydownEvent, true);
      ^
    
    ReferenceError: document is not defined
    
    Reviewed by jamesjjk at 2016-03-21 14:41
  • 7. Two little things

    Maybe three.

    1. I luv me some lang attrs on the <html> element (I actually don't even see one so the browser would just make one). This for less SR language heuristics and other benefits. http://adrianroselli.com/2015/01/on-use-of-lang-attribute.html
    2. Dunno how useful it is, but because aria-controls isn't presently doing much in SRs, people have been adding aria-describedby on panels pointing to the tabs.
    3. Panel id's are numbers, HTML says id's can't start with a digit. p1, p2... would work. er, 4: aria-selected role on the current/active tab.
    Reviewed by StommePoes at 2016-02-09 20:25
  • 8. Support for dynamic tabs?

    Hi @davidtheclark, does this support dynamically modifying tabs? I'm running into unpredictable behaviour and I'm not sure if because of how I'm doing this (I have a use-case where the number of tabs can vary dynamically).

    I've created a test showing my problem based on the stateless example here: https://esnextb.in/?gist=9e389ce9ef672543348eb7fa4d0a774b

    Without reducing the tab count, the arrow keys work as expected. If you then reduce the tab count, the arrow nav works one direction, but not the other. If you then restore the tab count, and then reduce once again, the arrow navigation stops working completely (tested Chrome, Windows and OSX)

    Reviewed by sgilligan at 2016-12-07 04:00
  • 9. Error: Cannot find module './dist-modules/ariaTabPanel.js'

    Hey David, it just so happens I’m finally giving React a try, and I needed some tabs, and so I thought “I wonder if David Clark has an accessible tab panel module.” And, well sure enough… 😄

    Anyway, I get this error when importing react-aria-tabpanel: Error: Cannot find module './dist-modules/ariaTabPanel.js'. When I change the module being required in index.js to be ./dist/AriaTabPanel.js it seems to fix it, so I’m guessing it is probably just a case of forgetting to not update index.js to point at the correct file.

    Reviewed by limulus at 2015-10-19 20:22
  • 10. React Test Utils with Jest Warning: Failed context type: The context `atpManager` is marked as required in `AriaTabPanel-Tab`, but its value is `undefined`.

    I have tried multiple ways of rendering (shallow, mount, stateless, etc) in a unit test but cannot mock the contextTypes. Is there an example of a way to get these tabs tested individually? here is my current test:

    import Tab from 'components/tabs/Tab';

    // Utils: createWrapper = ReactTestUtils.renderIntoDocument import { createWrapper, findAllElementsWithClassName } from 'utils/testing/testUtils';

    describe('', () => { const props = { contextCls: 'test-tab', id: 'test-id', letterNavigationText: 'test-letter-text', text: 'test-text', title: 'test-title', active: true, };

    it('renders without crashing', () => {
        const wrapper = createWrapper(Tab, props);
        const sections = findAllElementsWithClassName(wrapper, 'test-tab');
        expect(sections).toHaveLength(1);
    });
    

    });

    Error Message:

    Console

    console.error node_modules/fbjs/lib/warning.js:33
      **Warning: Failed context type: The context `atpManager` is marked as required in `AriaTabPanel-Tab`, but its value is `undefined`.**
          in AriaTabPanel-Tab (at Tab.js:52)
          in div (at Tab.js:49)
          in Tab (at testUtils.js:18)
    console.error node_modules/react-dom/cjs/react-dom.development.js:9747
      The above error occurred in the <AriaTabPanel-Tab> component:
          in AriaTabPanel-Tab (at Tab.js:52)
          in div (at Tab.js:49)
          in Tab (at testUtils.js:18)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    console.error node_modules/react-dom/cjs/react-dom.development.js:9747
      The above error occurred in the <AriaTabPanel-Tab> component:
          in AriaTabPanel-Tab (at Tab.js:52)
          in div (atTab.js:49)
          in Tab (at testUtils.js:18)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    

    › renders without crashing

    **TypeError: Cannot read property 'memberStartsActive' of undefined**
    
    Reviewed by djErock at 2018-06-12 14:10
  • 11. Use focus-group

    Arrow key navigation can now be outsourced to https://github.com/davidtheclark/focus-group. And it would be easy to include letter-key navigation through tabs, as well.

    Reviewed by davidtheclark at 2016-02-14 01:02
  • 12. Bump shell-quote from 1.6.1 to 1.7.3

    Bumps shell-quote from 1.6.1 to 1.7.3.

    Release notes

    Sourced from shell-quote's releases.

    v1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    v1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    v1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    v1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    v1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

    1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    1.7.0

    • Add support for parsing >> and >& redirection operators. (@​forivall in #16)
    • Add support for parsing <( process substitution operator. (@​cuonglm in #15)

    1.6.3

    • Fix Windows path quoting problems. (@​dy in #34)

    1.6.2

    • Remove dependencies in favour of native methods. (@​zertosh in #21)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-22 04:51
  • 13. Bump cached-path-relative from 1.0.1 to 1.1.0

    Bumps cached-path-relative from 1.0.1 to 1.1.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-01-27 14:38
  • 14. Fixed deprecation warning.

    Since React 16.3, use of componentWillMount gives a deprecation warning. Creating the manager in getInitialState prevents the warning.

    Tested manually with React 16.3.2 and 0.14.10.

    Reviewed by eostrom at 2021-11-21 03:14
  • 15. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-10 18:10
  • 16. Bump lodash from 4.17.4 to 4.17.21

    Bumps lodash from 4.17.4 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-07 04:55
  • 17. Bump ua-parser-js from 0.7.14 to 0.7.28

    Bumps ua-parser-js from 0.7.14 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-06 18:38
Headless, simple, and highly flexible tab-like primitives built with react hooks

react-headless-tabs Headless and highly flexible tab-like primitives built with react hooks ?? Check out the documentation and interactive examples! F

Jul 28, 2022
Atom like draggable tab react component
Atom like draggable tab react component

React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

Apr 27, 2022
React reusable tab component
React reusable tab component

react-re-super-tabs React reusable tab component Demo Installing yarn: yarn add react-re-super-tabs npm: npm install react-re-super-tabs --save Usage

May 7, 2022
💃 Make your react tab dance🕺
💃 Make your react tab dance🕺

A mobile support, draggable, editable and api based Tab for ReactJS. Support react >= v16.3 Note: Since v2, we don't support v15 and old styled-compon

Jul 18, 2022
A simple tab scroll view for react native

react-native-tab-flatlist ReactNative 跨平台实现TabView嵌套ScrollView滚动吸顶效果,采用react-native-tab-view+flatlist实现效果丝滑 安装 使用前需要先安装react-native-tab-view 与 react-n

Feb 23, 2022
A multi-tab layout manager
A multi-tab layout manager

FlexLayout FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved. Run the Demo Try it now

Aug 1, 2022
Add collapsible headers to your tab-view components.
Add collapsible headers to your tab-view components.

React Native Head Tab View ?? ?? ?? v4.0.0-rc.13 has been released, I hope you can help me test and collect questions. In this version, there is a big

Aug 8, 2022
Fast, open and free-to-use new tab page for modern browsers
Fast, open and free-to-use new tab page for modern browsers

Mue Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers. Table of contents Scre

Jul 12, 2022
UseTabs - Reusable way to create smooth tab highlights
UseTabs - Reusable way to create smooth tab highlights

useTabs Reusable way to create smooth tab highlights. Installation Install my-pr

Jul 31, 2022
A React component used to render accessible and simple tabs

Faster React Tabs Faster React Tabs is a flexible and context-agnostic React component used to render accessible and simple tabs. You can play with th

May 30, 2022
An accessible React tabs component

React Accessible Tabs An accessible React tabs component, ported from my vanilla JS plugin. Demo See it in action. Usage Installation npm install reac

Dec 4, 2020
Declarative, modular and accessible React tabs component

react-web-tabs Modular and accessible React tabs according to the WAI-ARIA Authoring Practices 1.1. Demo See the demo website for a live example. Docu

Apr 29, 2022
React-tabs-navigation is a nice react component that enables navigation through tabs in your web app.

react-tabs-navigation This react component enables navigating through tabs in your web app. It is composed of three different parts: Banner This conte

Aug 8, 2020
Tabs navigation component for React.

Easy to use React tab component 3 different looks/themes Define transition speed or use the navigation in the bottom Nest tab components inside other

Dec 10, 2018
React Tabs component.
React Tabs component.

rc-tabs React Tabs component. Screenshot Example http://localhost:8000/examples online example: https://tabs.react-component.now.sh/ install Feature K

Aug 8, 2022
A React component for rendering tabbed content.

A React component for rendering tabbed content.

Jan 10, 2022
🧲 Light, zero dependencies magnetic board component using HTML5 canvas
🧲 Light, zero dependencies magnetic board component using HTML5 canvas

React Magnetic Board Light, zero dependencies magnetic board component using HTML5 canvas ?? Demo Demos created with React DemoTab ?? Install npm inst

Feb 12, 2022
Simple blacklist hook for react-navigation to toggle top/bottom tabs.

react-navigation-blacklist Simple blacklist hook for react-navigation to toggle top/bottom tabs. Installation Make sure you have installed react-navig

Nov 22, 2021
React tabs with hooks

@bumaga/tabs Headless tabs component for React Features ?? super small, 381 B vs 3.5kB react-tabs ?? no styles, just logic. Style what you want, as yo

Jul 27, 2022