# epic-tabs-react

> A powerful React Tabs UI library.

Latest version **1.0.5** (published 2021-04-10) · MIT license · 0 weekly downloads

## Install

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

## 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.5 |
| Published | 2021-04-10 |
| First published | 2021-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 67.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Saff-Elli-Khan |
| Maintainers | saffellikhan |

## Links

- npm: https://www.npmjs.com/package/epic-tabs-react
- Repository: https://github.com/Saff-Elli-Khan/epic-tabs-react
- Homepage: https://github.com/Saff-Elli-Khan/epic-tabs-react#readme
- Issues: https://github.com/Saff-Elli-Khan/epic-tabs-react/issues
- npm.io page: https://npm.io/package/epic-tabs-react

## Dependencies (1)

- [react-jss](https://npm.io/package/react-jss.md) ^10.6.0

## Recent versions

- 1.0.5 (latest) — 2021-04-10
- 1.0.4 — 2021-04-06
- 1.0.3 — 2021-04-06
- 1.0.2 — 2021-04-06
- 1.0.1 — 2021-04-06
- 1.0.0 — 2021-04-06

## README

# epic-tabs-react

> A powerful React Tabs UI library.

[![NPM](https://img.shields.io/npm/v/epic-tabs-react.svg)](https://www.npmjs.com/package/epic-tabs-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save epic-tabs-react
```

## Usage

```tsx
import React from "react";
import { EpicTabs, EpicTabsRef } from "epic-tabs-react";

const App = () => {
  const Ref = React.useRef<EpicTabsRef>(null);

  return (
    <>
      <div style={{ padding: "40px" }}>
        <EpicTabs
          ref={Ref}
          data={[
            {
              id: "tab-1",
              label: () => <>Tab 1</>,
              content: () => <>Content 1</>,
            },
            { id: "tab-2", label: "Tab 2", content: () => <>Content 2</> },
            { id: "tab-3", label: "Tab 3", content: () => <>Content 3</> },
            { id: "tab-4", label: "Tab 4", content: () => <>Content 4</> },
            { id: "tab-5", label: "Tab 5", content: () => <>Content 5</> },
            { id: "tab-6", label: "Tab 6", content: () => <>Content 6</> },
            { id: "tab-7", label: "Tab 7", content: () => <>Content 7</> },
          ]}
          stretched
        />
      </div>
      <button
        onClick={() =>
          Ref.current?.set([
            { id: "tab-1", label: "Tab 1", content: () => <>Content 1</> },
            { id: "tab-2", label: "Tab 2", content: () => <>Content 2</> },
            { id: "tab-3", label: "Tab 3", content: () => <>Content 3</> },
          ])
        }
      >
        Set Tabs
      </button>
      <button
        onClick={() =>
          Ref.current?.add({
            id: "tab-4",
            label: "Tab 4",
            content: () => <>Content 4</>,
          })
        }
      >
        Add Tab
      </button>
      <button onClick={() => Ref.current?.remove("tab-4")}>Remove Tab</button>
      <button onClick={() => Ref.current?.prev()}>Prev Tab</button>
      <button onClick={() => Ref.current?.next()}>Next Tab</button>
      <button onClick={() => Ref.current?.empty()}>Empty</button>
    </>
  );
};

export default App;
```

## License

MIT © [Saff-Elli-Khan](https://github.com/Saff-Elli-Khan)

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