# react-tabs-raw

> React Tabs full customize able.

Latest version **1.0.7** (published 2024-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tabs-raw
pnpm add react-tabs-raw
yarn add react-tabs-raw
bun add react-tabs-raw
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-03-01 |
| First published | 2024-02-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Tofigh Nazari |
| Maintainers | tofigh_nazari |
| Keywords | react, react-tab, tabs, customize able tabs, tab |

## Links

- npm: https://www.npmjs.com/package/react-tabs-raw
- Repository: https://github.com/towfigh/react-tabs-raw
- Homepage: https://github.com/towfigh/react-tabs-raw.git
- Issues: https://github.com/towfigh/react-tabs-raw/issues
- npm.io page: https://npm.io/package/react-tabs-raw

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-03-01
- 1.0.6 — 2024-03-01
- 1.0.5 — 2024-03-01
- 1.0.41 — 2024-02-29
- 1.0.40 — 2024-02-29
- 1.0.39 — 2024-02-29
- 1.0.38 — 2024-02-29
- 1.0.37 — 2024-02-29
- 1.0.36 — 2024-02-29
- 1.0.35 — 2024-02-29
- 1.0.34 — 2024-02-29
- 1.0.33 — 2024-02-29
- 1.0.32 — 2024-02-29
- 1.0.31 — 2024-02-29
- 1.0.3 — 2024-02-29
- … 3 more at https://npm.io/package/react-tabs-raw/versions

## README

# 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:

```sh
$ npm i react-tabs-raw
```

or if you use Yarn:

```sh
$ yarn add react-tabs-raw
```

## Usage

#### Basic :

```js
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**

---
_Source: https://npm.io/package/react-tabs-raw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._