@droid-tech/react-ts-tabs

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:

Prop	Type	Required	Description
labels	string[]	Yes	An array of strings for tab labels
content	React.ReactNode[]	Yes	An array of React nodes for tab content
tabStyle	React.CSSProperties	No	Style object for inactive tabs
tabListStyle	React.CSSProperties	No	Style object for the tab list container
tabPanelStyle	React.CSSProperties	No	Style object for the tab panels
activeTabStyle	React.CSSProperties	No	Style object for the active tab

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.