# react-hash-tabs

> Extremely simple react hash tabs component

Latest version **0.0.3** (published 2017-08-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hash-tabs
pnpm add react-hash-tabs
yarn add react-hash-tabs
bun add react-hash-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.0.3 |
| Published | 2017-08-30 |
| First published | 2017-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | xiaohui ji |
| Maintainers | xiaohui.ji |

## Links

- npm: https://www.npmjs.com/package/react-hash-tabs
- Repository: https://github.com/xiaohuij/react-hash-tabs
- Homepage: https://github.com/xiaohuij/react-hash-tabs#readme
- Issues: https://github.com/xiaohuij/react-hash-tabs/issues
- npm.io page: https://npm.io/package/react-hash-tabs

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.4.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Recent versions

- 0.0.3 (latest) — 2017-08-30
- 0.0.1 — 2017-08-30

## README

# react-hash-tabs [![Build Status](https://travis-ci.org/xiaohuij/react-hash-tabs.svg?branch=master)](https://travis-ci.org/xiaohuij/react-hash-tabs) [![npm](https://img.shields.io/npm/v/react-hash-tabs.svg)](https://www.npmjs.com/package/react-hash-tabs)

Friendly for server-side rendering and SEO

## Why React-hash-tabs

|                    | *Rendering* | *Hash tag* |
| ---------------- | :-------------: | :-----: |
| **React-hash-tabs**    | Render all but only display selected tab | support trailing-hash |
| **Other choices**   | Render only selected tab             |   No |

## Installing

```bash
yarn add react-hash-tabs
```

You can also still use npm

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

Or use directly in your html as UMD component

```html
<script src="https://unpkg.com/react-hash-tabs@0.0.1/dist/react-hash-tabs.min.js" />
```

## Run demo

```js
yarn start
```
Or
```bash
npm run start
```

Go to http://localhost:8080

## Basic Usage

```js
import HashTabs from 'react-hash-tabs';

const tabs = [
  { name: 'Tab One', hash: 'one', content: <Component /> },
  { name: 'Tab Two', hash: 'two', content: 'text content' }
]

const enableHash = false

const App = () => (
  <div>
    <HashTabs isHash={enableHash} tabs={tabs} />
  </div>
)
```

## Components

React-hash-tabs has only 1 component.

### &lt;HashTabs /&gt;

#### isHash: `boolean`

> default: `true`

`isHash` is a switch to decide whether adding trailing-hash.

#### tabs: `Array<{[name]:String, [hash]:String, [content]: Node}>`

> default: []

`tabs` is an array of object each should have three keys: `name`, `hash` and `content`.
`name` is tab name, `hash` is related hash name, while `content` is tab content which could be raw text or react component.

## Styling

React-hash-tabs provides default style, which could be overwritten as per design.

Styles is implemented by SASS, which is accessible from

```scss
@import '../../path/to/node_modules/react-hash-tabs/src/index.scss';
```

## License

MIT

> Reference https://github.com/reactjs/react-tabs

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