🔧 tab-react-simple

Tab React Simple is a lightweight and efficient solution for adding tabbed interfaces to your React application. It supports both declarative component-based tabs and dynamic tab generation via props.

📦 installation

Install via NPM:

01. git clone https://codeberg.org/themandalorian/store.git

or clone the repository:

01 git clone https://codeberg.org/BuildSphere/simple-react-tabs.git

🥢 usage

As component:

import { MyTab, Tab, Content } from 'tab-react-simple';

function App() {
  return (
    <MyTab>
      <Tab>Tab Title 1</Tab>
      <Content>Content 1</Content>
      <Tab>Tab Title 2</Tab>
      <Content>Content 2</Content>
    </MyTab>

    /*
      or
    */

    <MyTab>
      {/* You can define tabs and content in any order */}
    
      <Content>Content for Tab 1</Content>
      <Tab>Tab Title 1</Tab>

      <Tab>Tab Title 2</Tab>

      <Tab>Tab Title 3</Tab>
      <Content>Content for Tab 2</Content>
      {/* No content for Tab 3 – this is allowed */}
    </MyTab>
  );
}

JSON data:

import { MyTab } from 'tab-react-simple';

const tabsData = [
  { title: 'Tab Title 1', content: 'Content 1' },
  { title: 'Tab Title 2', content: 'Content 2' }
];

function App() {
  return <MyTab tabs={tabsData} />;
}

✅ Notes

• You can mix the order of and , the component will map them in pairs based on appearance order.
• It’s valid to include a without a corresponding .

💫 features

• Lightweight & Simple – No extra dependencies
• Full Customization – Style with your own CSS using BEM naming
• Flexible Usage – Supports components or JSON input
• Modular Design – Use only what you need

🪡 development

After clone, feel free to customize the package.

📕 updates

See the UPDATE.me file for changelogs and upcoming features.

📜 license

MIT

🧩 creator

@themandalorian