react-tabs-raw

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.

Getting Started

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

Usage

Basic :

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} />;
};

Tabs

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).	{}

tabItems :

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

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -m 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request!

Authors

• Tofigh Nazari