Hudoro tabs

Hudoro tabs is a strict and customizable tabs component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/tabs

Instal package using yarn

  yarn add @hudoro/tabs

Instal package using npm

  npm i @hudoro/tabs

Usage/Examples

import React, {useState} from "react";
import ReactDOM from "react-dom/client";
import {Tabs, TabsLists, Tab, TabPanels, TabPanel} from "@hudoro/tabs";

const App = () => (
  <div style={{display: "flex", justifyContent: "center"}}>
    <Tabs activeTab={2}>
      <TabsLists>
        <Tab onClick={() => alert("oke")}>one</Tab>
        <Tab>two</Tab>
        <Tab>Three</Tab>
      </TabsLists>
      <TabPanels>
        <TabPanel>one</TabPanel>
        <TabPanel>two</TabPanel>
        <TabPanel>three </TabPanel>
      </TabPanels>
    </Tabs>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/tabs

Props that you can pass to <Tabs {...props} />

| Prop Name | Value | required | | :-------- | :--------- | :------- | | children | ReactNode | true | | activeTab | number | false | | onClick | () => void | false |

Props that you can pass to <TabsLists {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <TabPanels {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <Tab {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <TabPanel {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |