Tabs

v.3.1.0

Installation

yarn

yarn add @mercell/tabs-react

pnpm

pnpm add @mercell/tabs-react

npm

npm install --save @mercell/tabs-react

The Tabs has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Ribbon component is as simple as importing it like this.

import { Tab, Tabs } from '@mercell/tabs-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const TabsWrapper = () => { const [active, setActive] = React.useState("tab1"); return ( <div className="p-10"> <Tabs activeKey={active} onTabChange={(tabKey) => setActive(tabKey)} > <Tab tabKey="tab1" title="Tab item 1"> Tab 1 content <button className="ml-8" type="button" onClick={() => setActive('tab3')} > Go to the third tab </button> </Tab> <Tab tabKey="tab2" title="Tab item 2"> Tab 2 content </Tab> <Tab tabKey="tab3" title="Tab item 3"> Tab 3 content </Tab> <Tab tabKey="tab4" title="Tab item 4"> Tab 4 content </Tab> </Tabs> </div> ) } render (<TabsWrapper/>)

// You can play with code, with HTML tags and text as much as you want!
    const TabsWrapper = () => {
        const [active, setActive] = React.useState("tab1");
        return (
            <div className="p-10">
                <Tabs
                    activeKey={active}
                    onTabChange={(tabKey) => setActive(tabKey)}
                >
                    <Tab tabKey="tab1" title="Tab item 1">
                        Tab 1 content
                        <button
                            className="ml-8"
                            type="button"
                            onClick={() => setActive('tab3')}
                        >
                            Go to the third tab
                        </button>
                    </Tab>
                    <Tab tabKey="tab2" title="Tab item 2">
                        Tab 2 content
                    </Tab>
                    <Tab tabKey="tab3" title="Tab item 3">
                        Tab 3 content
                    </Tab>
                    <Tab tabKey="tab4" title="Tab item 4">
                        Tab 4 content
                    </Tab>
                </Tabs>
            </div>
        )
    }
    render (<TabsWrapper/>)

Result

Types, definitions, etc.

Types

TabsProps

interface TabsProps {
    hideLine?: boolean;
    activeKey: string;
    onTabChange: (tabKey: string) => void;
    tabsClassName?: string;
    tabContainerClassName?: string;
    tabContentContainerClassName?: string;
    tabsLineClassName?: string;
}

Name	Type	Default	Required	Description
hideLine	boolean	false	no	Optional switch for the underline between the tabs and the tab content
activeKey	string	-	yes	Sets the active starting key as well as updating the active tab if value is updated
onTabChange	(tabKey: string) => void	-	yes	What happens when a tab is clicked. Should follow the example to set a state that feeds into Tabs activeKey prop to change the active tab
tabsClassName	string	-	no	Custom className being added to the tabs parent element
tabContainerClassName	string	-	no	Custom className being added to the container containing the tabs
tabContentContainerClassName	string	-	no	Custom className being added to the container containing the tabs content
tabsLineClassName	string	-	no	Custom className being added to the container containing the dividing line

TabProps

interface TabProps {
    title: string;
    tabKey: string;
    icon?: ReactNode;
}

Name	Type	Default	Required	Description
title	string	-	yes	Title for the tab
tabKey	string	-	yes	Unique key to identify the tab. Used while selecting the activeKey in Tabs
icon?	ReactNode	-	no	Allows to add a custom icon

Changelog

Change Log - @mercell/tabs-react

This log was last generated on Tue, 17 Jan 2023 11:25:40 GMT and should not be manually modified.

3.1.0

Tue, 17 Jan 2023 11:25:40 GMT

Minor changes

• Updated the tabs to be more mobile friendly and some extra added some extra mobile functionality

3.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

2.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

1.4.0

Thu, 08 Sep 2022 10:22:24 GMT

Minor changes

• Added optional custom className props to different parts of the tabs as well as a new container for all content

1.3.4

Tue, 26 Jul 2022 08:00:07 GMT

Patches

• optional icon prop

1.3.3

Thu, 14 Jul 2022 13:28:46 GMT

Patches

• Updated hover state to remove sticky hover on mobile

1.3.2

Wed, 13 Jul 2022 06:55:40 GMT

Patches

• Removed hover on active tab

1.3.1

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Fix typings
• Package.json refactor, add test suite, more tests soon

1.3.0

Fri, 24 Jun 2022 12:32:21 GMT

Minor changes

• Simplified onTabChange, removed title and tabKey from the HTML element, mobile friendly and more mobile friendly logic added

1.2.0

Wed, 13 Apr 2022 08:36:45 GMT

Minor changes

• Fixed a small error with tabkey to tabKey

1.1.0

Fri, 08 Apr 2022 10:19:50 GMT

Minor changes

• Fix props names and dependency array

1.0.0

Thu, 10 Mar 2022 12:19:14 GMT

Breaking changes

• Added tabs component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card