@droid-tech/react-ts-tabs
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

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

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

7.04 kB

Total Files

6

Last publish

Collaborators

  • droid-tech