React Simple Tabs Component
A simple react component for adding accessible easy-to-use Tabs to your project.
Install
npm i react-simple-tabs-component
yarn add react-simple-tabs-component
Usage
import { Tabs } from 'react-simple-tabs-component'
import 'react-simple-tabs-component/dist/index.css'
const TabOne = () => {
return (
<>
<h3>Tab One</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sint illum iusto nostrum cumque qui
voluptas tenetur inventore ut quis?
</p>
</>
)
}
const tabs = [
{
label: 'Tab One',
Component: TabOne
},
{
label: 'Tab Two',
Component: TabTwo
},
{
label: 'Tab Three',
Component: TabThree
}
]
export default function App() {
return (
<div className='App'>
<Tabs tabs={tabs} /* Props */ />
</div>
)
Available Props
Prop | Type | Options | Description | Default |
---|
tabs | Array of objects | Required | Array of objects for your Tabs | - |
orientation | String | Optional | Tab orientation horizontal - vertical | horizontal |
type | String | Optional | Tabs type tabs - pills | tabs |
className | String | Optional | A className applied to the main div | bootstrap-tabs-component |
Style
The Component is based on Bootstrap 5 HTML
structure and CSS
classes so it will work out of the box if Bootstrap 5 css stylesheet is already included in you project. If you don't have/want to include Bootstrap, you still can use a standalone
css stylesheet which was extracted form bootstrap 5 stylesheet. Just add it:
import 'react-simple-tabs-component/dist/index.css'
License
MIT © awran5