Fully Customizable | Dynamic Content | Accessibility | Easy Integration
This package is a fully customizable React tabs component designed to fit seamlessly into your project. With easy-to-implement features and extensive options for customization, it allows developers to create intuitive and dynamic tabbed interfaces quickly.
To install the package, run the following command in your project directory:
$ npm i react-tabs-raw
or if you use Yarn:
$ yarn add react-tabs-raw
import React from "react";
import { Tabs } from "react-tabs-raw";
const MyComponent = () => {
const tabItems = [
{
key: "1",
title: "tab 1",
content: "content 1",
},
{
key: "2",
title: "tab 2",
content: "content 2",
},
{
key: "3",
title: "tab 3",
content: "content 3",
},
];
return <Tabs tabItems={tabItems} />;
};
Prop | Description | Default Value |
---|---|---|
tabItems * |
An array of tabItemTypes objects, each representing a single tab in the component | [] |
closeButton |
Content to be displayed as the close button on each tab | 'X' |
addButton |
Content to be displayed as the add button | '+' |
onAddTab |
A callback function that is executed when the add button is clicked | - |
classNames_content |
CSS classNames applied to the content area of the tabs | "" |
classNames_tab_title |
CSS classNames applied to the title of each tab. | "" |
classNames_selected_tab_title |
CSS classNames applied to the title of the active (selected). | "" |
styles_content |
Inline CSS styles applied to the content area of the tabs. | {} |
styles_tab_title |
Inline CSS styles applied to the title of each tab. | {} |
styles_selected_tab_title |
Inline CSS styles applied to the title of the active (selected). | {} |
Prop | Description | Type |
---|---|---|
key * |
A unique identifier for the tab item. | string / number |
title * |
The text or element to be displayed as the tab's title. | string / React.ReactNode |
content * |
The main content of the tab that is displayed when the tab is active. | string / React.ReactNode |
icon |
An icon displayed alongside the tab's title. | string / React.ReactNode |
hasClose |
Indicating whether the tab item should display a close button. | boolean |
disabled |
Determines if the tab is disabled. | boolean |
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Add your changes:
git add .
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request!
- Tofigh Nazari