rc-tabs

What is rc-tabs?

The rc-tabs package is a React component for creating and managing tabs in a web application. It provides a set of features that allow developers to create customizable and accessible tab interfaces with ease.

What are rc-tabs's main functionalities?

Basic Tabs

This feature allows you to create basic tabbed interfaces. Each TabPane component represents a tab panel with its own content.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';

const Demo = () => (
  <Tabs defaultActiveKey="1">
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Animated Tabs

This feature adds animations to the tab transitions, providing a more dynamic user experience.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const Demo = () => (
  <Tabs defaultActiveKey="1" animated={{ inkBar: true, tabPane: true }}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Vertical Tabs

This feature allows you to create vertical tabs, with the tab list displayed on the side rather than the top.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const Demo = () => (
  <Tabs defaultActiveKey="1" tabPosition="left">
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Customizable Tabs

This feature allows for customization of the tab bar, enabling the use of custom classes and styles.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const renderTabBar = (props, DefaultTabBar) => (
  <DefaultTabBar {...props} className="my-custom-class" />
);

const Demo = () => (
  <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Other packages similar to rc-tabs

react-tabs

react-tabs is a package that provides components for managing tabs in React. It is similar to rc-tabs but focuses on simplicity and accessibility, offering a more straightforward API with less customization options.

react-bootstrap-tabs

react-bootstrap-tabs is a component that integrates with the React-Bootstrap framework, providing tabs that are styled according to Bootstrap's design. It is suitable for those who are using Bootstrap for styling and want to maintain design consistency.

README

rc-tabs

---

React Tabs

Screenshot

Example

http://localhost:8000/examples

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

install

Feature

Keyboard

• left and up: switch to previous tab
• right and down: switch to next tab

Usage

import Tabs, { TabPane } from 'rc-tabs';

var callback = function(key) {};

React.render(
  <Tabs defaultActiveKey="2" onChange={callback}>
    <TabPane tab="tab 1" key="1">
      first
    </TabPane>
    <TabPane tab="tab 2" key="2">
      second
    </TabPane>
    <TabPane tab="tab 3" key="3">
      third
    </TabPane>
  </Tabs>,
  document.getElementById('t2'),
);

API

Tabs

name	type	default	description
activeKey	string	-	current active tabPanel's key
animated	boolean | { inkBar: boolean, tabPane: boolean }	true	config animation
defaultActiveKey	string	-	initial active tabPanel's key if activeKey is absent
destroyInactiveTabPane	`'ltr'	'rlt'`	'ltr'
direction	boolean	false	whether destroy inactive TabPane when change tab
editable	{ onEdit(type: 'add'	'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode }	-
locale	{ dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string }	-	Accessibility locale help text
moreIcon	ReactNode	-	collapse icon
tabBarGutter	number	0	config tab bar gutter
tabBarPosition	`'left'	'right'	'top'
tabBarStyle	style	-	tab nav style
tabBarExtraContent	ReactNode | { left: ReactNode, right: ReactNode }	-	config extra content
renderTabBar	(props, TabBarComponent) => ReactElement	-	How to render tab bar
prefixCls	string	'rc-tabs'	prefix class name, use to custom style
onChange	(key) => void	-	called when tabPanel is changed
onTabClick	(key) => void	-	called when tab click
onTabScroll	({ direction }) => void	-	called when tab scroll

TabPane

name	type	default	description
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.