# ztabs

> simple tab app experiment

Latest version **0.1.7** (published 2022-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ztabs
pnpm add ztabs
yarn add ztabs
bun add ztabs
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-08-12 |
| First published | 2022-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 68.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Luiz Leonardo Lima |
| Maintainers | zeonardo |
| Keywords | react, typescript, component, ui, tab, tabber, tabulator, abas, tabbed |

## Links

- npm: https://www.npmjs.com/package/ztabs
- Repository: https://github.com/zeonardo/ztabs
- Homepage: https://github.com/zeonardo/ztabs#readme
- Issues: https://github.com/zeonardo/ztabs/issues
- npm.io page: https://npm.io/package/ztabs

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

- 0.1.7 (latest) — 2022-08-12
- 0.1.6 — 2022-08-12
- 0.1.5 — 2022-08-11
- 0.1.4 — 2022-08-11
- 0.1.3 — 2022-08-11
- 0.1.2 — 2022-08-11
- 0.1.1 — 2022-08-11
- 0.1.0 — 2022-08-11

## README

![GitHub last commit](https://img.shields.io/github/last-commit/zeonardo/ztabs)
![npm](https://img.shields.io/npm/v/ztabs)
![beta](https://img.shields.io/badge/-beta-yellow)

# ztabs

a simple tab test project
  
![Expected screen output](https://github.com/zeonardo/ptf-tabulator/blob/master/src/assets/tabulator.png)

## Getting Started

```sh
$ npm install --save ztabs
```
or
```sh
$ yarn add ztabs
```

## Usage

```sh
import Tab from "ztabs";
```

...

```html
<Tab initialActive={0}>
  <Tab.Pane title="First Tab">
    Tab 0
  </Tab.Pane>
  <Tab.Pane title="Second Tab">
    <div>
      Tab <strong>1</strong>
    </div>
  </Tab.Pane>
  <Tab.Pane title="Third Tab">
    <>
      <h2>Tab</h2>
      <span>2</span>
    </>
  </Tab.Pane>
</Tab>
```

## Options and examples

### Tab

> `initialActive` (uncontrolled mode): zero-based index of the default active tab.  
Tab changes will be handled by `Tab`
```jsx
  <Tab initialActive={0}>
```

> `active` (controlled mode): zero-based index of the currently active tab.  
Tab changes will be controlled by this `{value}` through `onActiveChange`
```jsx
  <Tab active={value}>
```

> `onActiveChange` (controlled mode): event handler function called upon tab click
```jsx
  <Tab active={value} onActiveChange={(event: React.MouseEvent<HTMLButtonElement>) => setValue(+event.currentTarget.value)} >
```

### Tab.Pane

> `title`: Tab name
```jsx
<Tab.Pane title="MyTab" >
```

> `<children/>`: Tab content
```jsx
<Tab.Pane title="MyTab" >
    <div>Tab Content</div>
</Tab.Pane>
```

## Credits

TODO: Write credits :)

## Built With

* [React](https://reactjs.org/)
* [TypeScript](https://www.typescriptlang.org/)
* Love

## Versioning

We use [SemVer](http://semver.org/) for versioning.
For the versions available, see the [tags on this repository](https://github.com/zeonardo/ztabs/tags).

## Authors

* **Zeonardo Lima** - [zeonardo on GitHub](https://github.com/zeonardo)

## License
[MIT License](https://zeonardo.mit-license.org/2022) © zeonardo 2022

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