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

yarn add react-hash-tabs

You can also still use npm

npm install react-hash-tabs --save

Or use directly in your html as UMD component

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

Run demo

yarn start

npm run start

Go to http://localhost:8080

Basic Usage

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.

<HashTabs />

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

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

License

MIT

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

xiaohuij/react-hash-tabs