# @dbosoft/react-tabs

> Display content in a tabbed interface

Latest version **0.2.0** (published 2023-05-17) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install @dbosoft/react-tabs
pnpm add @dbosoft/react-tabs
yarn add @dbosoft/react-tabs
bun add @dbosoft/react-tabs
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-05-17 |
| First published | 2021-09-29 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 47.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dbosoft |
| Maintainers | dbosoft-package-maintainers, fwagner_dbosoft |

## Links

- npm: https://www.npmjs.com/package/@dbosoft/react-tabs
- npm.io page: https://npm.io/package/@dbosoft/react-tabs

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@reach/portal](https://npm.io/package/@reach/portal.md) ^0.16.0
- [@reach/tooltip](https://npm.io/package/@reach/tooltip.md) ^0.16.0
- [@dbosoft/react-inline-svg](https://npm.io/package/@dbosoft/react-inline-svg.md) 0.2.0

## Recent versions

- 0.2.0 (latest) — 2023-05-17
- 0.1.0 — 2021-09-29

## README

# Tabs

Tabs will render arbitrary tabbed content based on `Tab` items passed as children.

### Example Usage

```jsx
<Tabs>
  <Tab heading="First Tab">
    <p>First tab content</p>
  </Tab>
  <Tab heading="Second Tab">
    <p>Second tab content</p>
  </Tab>
  <Tab heading="Third Tab">
    <p>Third tab content</p>
  </Tab>
</Tabs>
```

### Component Props

### `Tabs`

| Name            | Type            | Description                                                                                                                               | Required |
| --------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| children        | React.ReactNode | `Tab` components to render.                                                                                                               | true     |
| defaultTabIdx   | number          | If set, the tab with the specified ID will be active by default. If not set or if the ID does not match, it will default to 0             | false    |
| centered        | boolean         | If true, the tabs are centered in their container, rather than left-aligned                                                               | false    |
| fullWidthBorder | boolean         | If true, the border line underneath the tabs expands to the full width of the container, rather than being slightly padded from the edges | false    |

### `Tab`

| Name     | Type            | Description                                                                                                                                                                                                     | Required |
| -------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| heading  | string          | Title of the tab                                                                                                                                                                                                | true     |
| tooltip  | string          | Optional tooltip to be displayed next to the tab title                                                                                                                                                          | false    |
| group    | string          | A unique identifier for a tab 'group' that, when active, all Tabs with this id will become active when one is selected. _Note_ it's necessary to wrap the page with `TabProvider` for this feature to function. | false    |
| children | React.ReactNode | Content that should render when the associated tab is active.                                                                                                                                                   | false    |

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