Tabs Component

A simple React TypeScript Tab component

The DroidTabs 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 DroidTabs component in your React application, install it via npm:

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

yarn add @droid-tech/react-ts-droidtabs

Usage

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

import React from "react";
import DroidTabs from "droidtabs";

const App: React.FC = () => {
  const labels = ["Tab 1", "Tab 2", "Tab 3"];
  const content = [
    <p key="1">This is content for Tab 1</p>,
    <p key="2">This is content for Tab 2</p>,
    <p key="3">This is content for Tab 3</p>,
  ];

  return (
    <DroidTabs
      labels={labels}
      content={content}
      tabStyle={{ color: "gray" }}
      activeTabStyle={{ color: "black", borderBottom: "2px solid blue" }}
      tabListStyle={{ backgroundColor: "#f8f8f8", padding: "10px" }}
      tabPanelStyle={{ border: "1px solid #ccc", borderRadius: "5px" }}
    />
  );
};

export default App;

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.