@hiendv/react-tabs

@hiendv/react-tabs

Lightweight and flexible tabs component for the web

Features

• Tab definition using template & programmatically
• Octicons support in tab items
• Beautiful modulized themes included
• Easily accessible navigation with URL
• Easy tab positioning
• Ghost tabs support

Demo

See https://hiendv.github.io/tabs

Installation & Usage

CDN

<script src="https://cdn.jsdelivr.net/npm/@hiendv/react-tabs@latest/dist/iife.js" crossorigin="anonymous"></script>

Note: We recommend linking to a specific version number that you can update manually

const { Tab, Tabs, themeDefault, themeDark } = reacttabs

NPM

npm install --save @hiendv/react-tabs
# yarn add @hiendv/react-tabs

import React, { Component } from 'react'
import { Tabs, Tab } from '@hiendv/react-tabs'
export default class App extends Component {
  render () {
    return (
      <Tabs>
        <Tab title='First'>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </Tab>

        <Tab title='Second'>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </Tab>

        <Tab title='Third'>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
        </Tab>
      </Tabs>
    )
  }
}

Please see react-tabs-example for a complete demonstration.

Documentation

Tabs

Property	Type	Required	Default	Description
theme	Object	No	themeDefault - @hiendv/tabs	Modulized style
show	Number	No	0	Initial active tab

---

Event	Arguments	Description
onUpdate	(index)	Current active tab

Tab

Props

Property	Type	Required	Default	Description
title	String	No	'Title'	Tab title
icon	Object	No	Empty	Tab octicon - octicons-react
hash	String	No	null	Unique hash fragment for easy bookmark and navigation
end	Boolean	No	false	Push the tab and its following friends to the right
ghost	Boolean	No	false	Mark tab as a pure button

Development & Testing

Please check the Contributing Guidelines.

Contribution

Issues and PRs are welcome !