@fredybustos/react-tabs v1.0.1

Tabs Component

This React library offers a fully customizable, dynamic tab system that allows developers to easily integrate multi-view content navigation into their applications. Designed for versatility and ease of use, this tab component can seamlessly fit into any project, whether you're building a dashboard, a user profile, or a data-driven application.

Installation

To install the tabs component, run the following command:

  npm install @fredybustos/react-tabs
  or
  yarn add @fredybustos/react-tabs

Import css file

To ensure that the tab styles are applied correctly, you need to import the generated CSS file tabs.min.css. Depending on your working environment, you can do this in the following ways:

In your React project, add the following import statement to your index.js file, before importing your project's CSS:

import '@fredybustos/react-tabs/dist/esm/tabs.min.css';

Usage

This is how you can set up a simple tab content. The active tab will be highlighted automatically, and users can switch between the sections seamlessly.

Import the Tabs component and render it with Tab components as children:

import React from 'react';
import { Tabs, Tab } from '@fredybustos/react-tabs'

const App = () => {
  const handleSelect = ({ index, element }) => {
    console.log(`Selected tab ${index} with title ${element.title}`);
  };

  return (
    <Tabs onSelect={handleSelect}>
      <Tab title="Tab 1">
        Content of Tab 1
      </Tab>
      <Tab
        icon={<CommentIcon sx={{ mr: 2 }} />}
        title="Tab 2"
      >
        Content of Tab 2
      </Tab>
      <Tab
        disabled
        title="Tab 3"
      >
        Content of Tab 3
      </Tab>
    </Tabs>
  );
};

Tab properties

type Styles = {
  style: React.CSSProperties
  className: string
}

Tabs properties

License

This project is licensed under the MIT LICENSE. See the file for details.

Contributing

Contributions are welcome! Please submit a pull request with your changes.