@droid-tech/react-ts-tabs v0.0.1

Tabs Component

The Tabs component is a customizable React component that creates a tabbed interface. It's written in TypeScript for better type safety and maintainability.

Features

• Customizable tab labels
• Customizable tab content
• Customizable styles for tabs, tab list, tab panels, and active tabs
• TypeScript support for type safety

Installation

To use the Tabs component in your React application, install it via npm:

npm install @droid-tech/react-ts-tabs

Usage

To use the Tabs component, import it and provide the required props:

import Tabs from "@droid-tech/react-ts-tabs";

const MyComponent = () => {
  return (
    <Tabs
      labels={["Tab 1", "Tab 2", "Tab 3"]}
      content={[
        <div>Content for Tab 1</div>,
        <div>Content for Tab 2</div>,
        <div>Content for Tab 3</div>
      ]}
    />
  );
};

Props

The Tabs component accepts the following props:

Customization

You can customize the appearance of the Tabs component by passing style objects to the various style props. For example:

<Tabs
  labels={["Tab 1", "Tab 2", "Tab 3"]}
  content={[/* ... */]}
  tabStyle={{ backgroundColor: '#f0f0f0' }}
  activeTabStyle={{ backgroundColor: '#fff', color: '#000' }}
  tabListStyle={{ borderBottom: '2px solid #ccc' }}
  tabPanelStyle={{ padding: '30px' }}
/>

Conclusion

The Tabs component provides a flexible and customizable way to create tabbed interfaces in your React application. With its styling options and TypeScript support, it can easily be integrated into your project and styled to match your design requirements.