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/[email protected]/dist/react-hash-tabs.min.js" />

Run demo

yarn start

Or

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