react-simple-tabs-component
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    React Simple Tabs Component

    A simple react component for adding accessible easy-to-use Tabs to your project.

    NPM npm bundle size GitHub

    screenshot

    Install

    # npm
    npm i react-simple-tabs-component
    
    # Yarn
    yarn add react-simple-tabs-component

    Usage

    import { Tabs } from 'react-simple-tabs-component'
    // (Optional) if you don't want to include bootstrap css stylesheet
    import 'react-simple-tabs-component/dist/index.css'
    
    // Component Example
    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>
        </>
      )
    }
    
    // Tabs structure Array
    const tabs = [
      {
        label: 'Tab One', // Tab Title - String
        Component: TabOne // Tab Body - JSX.Element
      },
      {
        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'

    Edit react-typescript-tabs (forked)

    License

    MIT © awran5

    Install

    npm i react-simple-tabs-component

    DownloadsWeekly Downloads

    77

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • awran5