FineTabs

A React tabs component that provides a simple and customizable way to display tabs and their contents.

Installation

To install the library, use the following command:

npm install finetabs

or

yarn add finetabs

Usage

Import the FineTab and FineTabs components from the finetabs library:

    import { FineTab, FineTabs } from 'finetabs';

Create tabs using the FineTabs and FineTab components:

import React from 'react';
import { FineTab, FineTabs } from 'finetabs';

const MyComponent = () => {
  return (
    <FineTabs defaultTab={0}>
      <FineTab title="Tab 1">
        <div>Content of Tab 1</div>
      </FineTab>
      <FineTab title="Tab 2">
        <div>Content of Tab 2</div>
      </FineTab>
    </FineTabs>
  );
};

export default MyComponent;

Props

FineTabs

Prop Type Default Description defaultTab number 0 The index of the default active tab onChange function - Function called when the active tab changes (optional) className string - Additional className for the tabs container (optional) lineColor string "#1C3133" Color of the active tab line (optional) aboveLine boolean false Whether the line should be above the tabs (optional) hashToUrl boolean true If true, will update the URL hash with the tab's hash (optional)

FineTab

Prop Type Default Description hash string - The unique identifier for the tab title string - The title displayed on the tab className string - Additional className for the tabs container (optional) titleClassName string - Additional className for the tab title (optional)

License

MIT