The Tabs component is a customizable React component that creates a tabbed interface. It's written in TypeScript for better type safety and maintainability.
- Customizable tab labels
- Customizable tab content
- Customizable styles for tabs, tab list, tab panels, and active tabs
- TypeScript support for type safety
To use the Tabs component in your React application, install it via npm:
npm install @droid-tech/react-ts-tabs
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>
]}
/>
);
};
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 |
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' }}
/>
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.