epic-tabs-react

A powerful React Tabs UI library.

Install

npm install --save epic-tabs-react

Usage

import React from "react";
import { EpicTabs, EpicTabsRef } from "epic-tabs-react";

const App = () => {
  const Ref = React.useRef<EpicTabsRef>(null);

  return (
    <>
      <div style={{ padding: "40px" }}>
        <EpicTabs
          ref={Ref}
          data={[
            {
              id: "tab-1",
              label: () => <>Tab 1</>,
              content: () => <>Content 1</>,
            },
            { id: "tab-2", label: "Tab 2", content: () => <>Content 2</> },
            { id: "tab-3", label: "Tab 3", content: () => <>Content 3</> },
            { id: "tab-4", label: "Tab 4", content: () => <>Content 4</> },
            { id: "tab-5", label: "Tab 5", content: () => <>Content 5</> },
            { id: "tab-6", label: "Tab 6", content: () => <>Content 6</> },
            { id: "tab-7", label: "Tab 7", content: () => <>Content 7</> },
          ]}
          stretched
        />
      </div>
      <button
        onClick={() =>
          Ref.current?.set([
            { id: "tab-1", label: "Tab 1", content: () => <>Content 1</> },
            { id: "tab-2", label: "Tab 2", content: () => <>Content 2</> },
            { id: "tab-3", label: "Tab 3", content: () => <>Content 3</> },
          ])
        }
      >
        Set Tabs
      </button>
      <button
        onClick={() =>
          Ref.current?.add({
            id: "tab-4",
            label: "Tab 4",
            content: () => <>Content 4</>,
          })
        }
      >
        Add Tab
      </button>
      <button onClick={() => Ref.current?.remove("tab-4")}>Remove Tab</button>
      <button onClick={() => Ref.current?.prev()}>Prev Tab</button>
      <button onClick={() => Ref.current?.next()}>Next Tab</button>
      <button onClick={() => Ref.current?.empty()}>Empty</button>
    </>
  );
};

export default App;

License

MIT © Saff-Elli-Khan