router5-tabs-react

Tabs component, based on router5 and react which provides minimalistic interface for toggleable tabbed navigation.

Install

yarn add router5-tabs-react

Features

:paperclip: Accessibility and semantics
:lock: Supports stateful URLs
:hamster: Tiny component (< 120 lines, ~3kb gzipped)
:scissors: Customizable icons
:heart: Tailwind default styles
:chart_with_upwards_trend: Content won't be deleted - only hidden
:mag: Provides data-cy prop for e2e testing

Usage

import Tabs from 'router5-tabs-react'

export const Profile = () => {
  const tabs = [
    {
      name: 'user',
      label: 'User',
    },
    {
      name: 'settings',
      label: 'Settings',
    },
    {
      name: 'billing',
      label: 'Billing',
    },
  ]
  return (
    <Tabs>
      <User />
      <Settings />
      <Billing />
    </Tabs>
  )
}

Stateful URLs

To support stateful URLs - you need tab parameter added to your router. It can be query or /subpath

router.ts

{
  name: 'users',
  path: '/:userId',
  // add following to node where you want stateful tabs enabled:
  forwardTo: 'users.tab', // value of {tab: string} should match name of tab you want to show by default
  defaultParams: { tab: 'info' },
  children: [{ name: 'tab', path: '/:tab' }], // add this
},

Also you need to return proper page, for that you can use something like this in your App:

  'users': lazy(() => import('./users')),
  'users.tab': lazy(() => import('./users')),

Acknowledgements

Dee Money

License

MIT © https://github.com/thousandsofraccoons