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

📎 Accessibility and semantics
🔒 Supports stateful URLs
🐹 Tiny component (< 120 lines, ~3kb gzipped)
✂️ Customizable icons
❤️ Tailwind default styles
📈 Content won't be deleted - only hidden
🔍 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>
  )
}

Acknowledgements

Dee Money

License

MIT © https://github.com/thousandsofraccoons