# react-metro-tabs

> windows phone style tabs in react.js

Latest version **1.1.0** (published 2022-05-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-05-29 |
| First published | 2022-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sepehr Nava |
| Maintainers | spnava |
| Keywords | react, tab, windows phone, metro, animation |

## Links

- npm: https://www.npmjs.com/package/react-metro-tabs
- Repository: https://github.com/spnava/react-metro-tabs
- Issues: https://github.com/spnava/react-metro-tabs/issues
- npm.io page: https://npm.io/package/react-metro-tabs

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^8.4.6
- [react-hammerjs](https://npm.io/package/react-hammerjs.md) ^1.0.1

## 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.1.0 (latest) — 2022-05-29

## README

# React Metro Tabs

windows phone style tabs in react.js

## Install

```bash
npm install react-metro-tabs
```

```bash
yarn add react-metro-tabs
```

## Demo

![](./Assets/demo.gif)

## Github Pages

[Github Pages](https://spnava.github.io/react-metro-tabs/)

## CodeSandbox

[Sandbox](https://codesandbox.io/s/strange-butterfly-hu80m2?from-embed)

## Example Usage

```jsx
import React, { Component } from "react";

import { MetroTabs, MetroTab } from "react-metro-tabs";

export default function App() {
  return (
    <div
      style={{
        border: "2px solid black",
        borderRadius: 10,
        height: 500,
        width: 300,
      }}
    >
      <MetroTabs onTabChange={(e) => console.log(e)} tabSpaces={50}>
        <MetroTab title='landing page'>content1</MetroTab>
        <MetroTab title='study cases'>content2</MetroTab>
        <MetroTab title='contact us'>content3</MetroTab>
      </MetroTabs>
    </div>
  );
}
```

## MetroTabs props

| Prop                     | Type     | Description                                               | Default  |
| ------------------------ | -------- | --------------------------------------------------------- | -------- |
| transitionDuration       | number   | transition duration                                       | 1000     |
| tabSpaces                | number   | space between tabs, make it dynamic for making responsive | 70       |
| tabsColor                | string   | color of all tabs                                         | "#000"   |
| tabFontSize              | number   | font size of all tabs                                     | "2.5em"  |
| tabFontWeight            | number   | font weight of all tabs                                   | "normal" |
| transitionTimingFunction | string   | transition timing function                                | "ease"   |
| onTabChange              | Function | function that triggers on tab change                      |          |
| children                 | Node     | children (only MetroTab is allowed)                       |          |

## MetroTab props

| Prop     | Type   | Description                           | Default |
| -------- | ------ | ------------------------------------- | ------- |
| title    | string | title of the tab                      |         |
| children | Node   | children (every children are allowed) |         |

## License

The source code is licensed under MIT, all assets are copyrighted to their respective owner.

This package uses react-hammerjs underhood.

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