rc-tabs

React Tabs component.

Screenshot

Example

http://localhost:8000/examples

online example: https://tabs.react-component.now.sh/

install

Feature

Keyboard

left and up: tabs to previous tab
right and down: tabs to next tab

Usage

import Tabs from 'rc-tabs';
import ReactDom from 'react-dom';

const callback = (key) => {
  console.log(key);
};

const items = [
  {
    key: '1',
    label: 'Google',
    children: (
      <div className="text-xl">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
      </div>
    ),
  },
  {
    key: '2',
    label: <p>Amazon</p>,
    children:
      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
    disabled: true,
  },
  {
    key: '3',
    label: <p>Twitter</p>,
    children: (
      <div>
        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
        because it is pain..."
      </div>
    ),
  },
];

ReactDom.render(
  <Tabs
    tabPosition="bottom"
    items={items}
    defaultActiveKey="1"
    className="md:w-[70%] w-full mx-auto p-2 border-0"
    onChange={callback}
    style={{ color: 'yellow' }}
  />,
  root,
);

API

Tabs

name	type	default	description
prefixCls	string	`'rc-tabs'`	prefix class name, use to custom style
className	string	-	to define a class name for an element
style	CSS properties	-	object with css properties for styling
items	TabItem[]	[]	configure tab content
id	string	-	unique identifier
defaultActiveKey	string	-	initial active tabPanel's key if activeKey is absent
activeKey	string	-	current active tabPanel's key
direction	`'ltr' or 'rtl'`	`'ltr'`	Layout direction of tabs component
animated	boolean \| { inkBar: boolean, tabPane: boolean }	`{ inkBar: true, tabPane: false }`	config animation
renderTabBar	(props, TabBarComponent) => ReactElement	-	How to render tab bar
tabBarExtraContent	ReactNode \| `{ left: ReactNode, right: ReactNode }`	-	config extra content
tabBarGutter	number	0	config tab bar gutter
tabBarPosition	`'left' \\| 'right' \\| 'top' \\| 'bottom'`	`'top'`	tab nav 's position
tabBarStyle	style	-	tab nav style
tabPosition	`'left' or 'right' or 'top' or 'bottom'`	`'top'`	tab nav 's position
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
onChange	(key) => void	-	called when tabPanel is changed
onTabClick	(key) => void	-	called when tab click
onTabScroll	({ direction }) => void	-	called when tab scroll
editable	{ onEdit(type: 'add' \| 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode }	-	config tab editable
locale	{ dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string }	-	Accessibility locale help text
moreIcon	ReactNode	-	collapse icon

TabItem

name	type	default	description
key	string	-	corresponding to activeKey, should be unique
label	string	-	TabPane's head display text
tab	ReactNode	-	current tab's title corresponding to current tabPane
className	string	-	to define a class name for an element
style	CSS properties	-	object with css properties for styling
disabled	boolean	false	set TabPane disabled
children	ReactNode	-	TabPane's head display content
forceRender	boolean	false	forced render of content in tabs, not lazy render after clicking on tabs
closable	boolean	false	closable feature of tab item
closeIcon	ReactNode	-	Config close icon
prefixCls	string	`'rc-tabs-tab'`	prefix class name, use to custom style
id	string	-	unique identifier
animated	boolean \| { inkBar: boolean, tabPane: boolean }	`{ inkBar: true, tabPane: false }`	config animation
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
active	boolean	false	active feature of tab item
tabKey	string	-	key linked to tab

TabPane(support in older versions)

name	type	default	description
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
key	string	-	corresponding to activeKey, should be unique
forceRender	boolean	false	forced render of content in tabs, not lazy render after clicking on tabs
tab	ReactNode	-	current tab's title corresponding to current tabPane
closeIcon	ReactNode	-	Config close icon

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-tabs is released under the MIT license.

FAQ

Responsive Tabs

There are 3 cases when handling responsive tabs:

We get hidden tabs through useVisibleRange.ts. If enconter the third case, in order to make tabs responsive, some tabs should be hidden. So we minus addSize when calculating basicSize manully, even though there's no addNode in container. In this way, case 3 turns to case 2, tabs become stable again.

react-component / tabs

readme