Socket
Socket
Sign inDemoInstall

rc-tabs

Package Overview
Dependencies
18
Maintainers
7
Versions
222
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-tabs

tabs ui component for react


Version published
Maintainers
7
Weekly downloads
1,167,145
decreased by-7.7%

Weekly downloads

Package description

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

Readme

Source

rc-tabs


React Tabs component.

NPM version dumi build status Test coverage npm download bundle size

Screenshot

Example

http://localhost:8000/examples

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

install

rc-tabs

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

nametypedefaultdescription
prefixClsstring'rc-tabs'prefix class name, use to custom style
classNamestring-to define a class name for an element
styleCSS properties-object with css properties for styling
itemsTabItem[][]configure tab content
idstring-unique identifier
defaultActiveKeystring-initial active tabPanel's key if activeKey is absent
activeKeystring-current active tabPanel's key
direction'ltr' or 'rtl''ltr'Layout direction of tabs component
animatedboolean | { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }config animation
renderTabBar(props, TabBarComponent) => ReactElement-How to render tab bar
tabBarExtraContentReactNode | { left: ReactNode, right: ReactNode }-config extra content
tabBarGutternumber0config tab bar gutter
tabBarPosition'left' | 'right' | 'top' | 'bottom''top'tab nav 's position
tabBarStylestyle-tab nav style
tabPosition'left' or 'right' or 'top' or 'bottom''top'tab nav 's position
destroyInactiveTabPanebooleanfalsewhether 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 }-
locale{ dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string }-Accessibility locale help text
moreIconReactNode-collapse icon

TabItem

nametypedefaultdescription
keystring-corresponding to activeKey, should be unique
labelstring-TabPane's head display text
tabReactNode-current tab's title corresponding to current tabPane
classNamestring-to define a class name for an element
styleCSS properties-object with css properties for styling
disabledbooleanfalseset TabPane disabled
childrenReactNode-TabPane's head display content
forceRenderbooleanfalseforced render of content in tabs, not lazy render after clicking on tabs
closablebooleanfalseclosable feature of tab item
closeIconReactNode-Config close icon
prefixClsstring'rc-tabs-tab'prefix class name, use to custom style
idstring-unique identifier
animatedboolean | { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }config animation
destroyInactiveTabPanebooleanfalsewhether destroy inactive TabPane when change tab
activebooleanfalseactive feature of tab item
tabKeystring-key linked to tab

TabPane(support in older versions)

nametypedefaultdescription
destroyInactiveTabPanebooleanfalsewhether destroy inactive TabPane when change tab
keystring-corresponding to activeKey, should be unique
forceRenderbooleanfalseforced render of content in tabs, not lazy render after clicking on tabs
tabReactNode-current tab's title corresponding to current tabPane
closeIconReactNode-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: image

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.

Keywords

FAQs

Last updated on 08 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc