Sel-custom-app-bar NPM

CustomAppBar

CustomAppBar is a highly customizable and reusable React component designed to provide a dynamic application toolbar with integrated tab navigation. The component supports both open and collapsed views, dynamically renders content for each tab, and offers robust state management. It’s perfect for integrating into dashboards, administrative tools, or any application requiring a modern and responsive app bar.

Features

Dynamic Tabs: Add, remove, or update tabs dynamically.
Customizable Content: Map tabs to specific components for dynamic rendering.
Controlled & Uncontrolled Modes: Manage open and tabSelected states internally or via parent control.
Responsive Design: Compact view for icons when collapsed and full tabs when expanded.
Hooks Support: Easily integrate custom state management logic with useTabs.

Installation

To use CustomAppBar, install it via npm:

npm i sel-custom-app-bar

Usage

Basic Example (Uncontrolled Mode)

import React from "react";
import CustomAppBar from "custom-app-bar";
import DirectionsBoatFilledIcon from "@mui/icons-material/DirectionsBoatFilled";
import LocalPrintshopIcon from "@mui/icons-material/LocalPrintshop";
import HelpIcon from "@mui/icons-material/Help";

const tabs = [
  { key: "vessel", label: "Vessel", icon: <DirectionsBoatFilledIcon /> },
  { key: "print", label: "Print", icon: <LocalPrintshopIcon /> },
  { key: "help", label: "Help", icon: <HelpIcon /> },
];

const components = {
  vessel: <div>Vessel Content</div>,
  print: <div>Print Content</div>,
  help: <div>Help Content</div>,
};

const App = () => {
  return <CustomAppBar tabs={tabs} components={components} />;
};

export default App;

Advanced Example (Controlled Mode)

import React, { useState } from "react";
import CustomAppBar from "custom-app-bar";
import DirectionsBoatFilledIcon from "@mui/icons-material/DirectionsBoatFilled";
import LocalPrintshopIcon from "@mui/icons-material/LocalPrintshop";
import HelpIcon from "@mui/icons-material/Help";

const tabs = [
  { key: "vessel", label: "Vessel", icon: <DirectionsBoatFilledIcon /> },
  { key: "print", label: "Print", icon: <LocalPrintshopIcon /> },
  { key: "help", label: "Help", icon: <HelpIcon /> },
];

const components = {
  vessel: <div>Vessel Content</div>,
  print: <div>Print Content</div>,
  help: <div>Help Content</div>,
};

const App = () => {
  const [open, setOpen] = useState(false);
  const [tabSelected, setTabSelected] = useState({
    vessel: false,
    print: false,
    help: false,
  });

  const handleTabChange = (key: string) => {
    console.log(`Tab changed to: ${key}`);
  };

  return (
    <CustomAppBar
      tabs={tabs}
      components={components}
      open={open}
      tabSelected={tabSelected}
      setOpen={setOpen}
      setTabSelected={setTabSelected}
      onTabChange={handleTabChange}
      initialOpen={false}
      tabSelectedColor="primary"
    />
  );
};

export default App;

Props

Required Props

Prop	Type	Description
`tabs`	`TabsType[]`	Array of tabs with key, label, and optional icon.
`components`	`Record<string, ReactNode>`	Mapping of tab keys to their respective content.

Optional Props

Prop	Type	Description
`open`	`boolean`	Controls whether the drawer is open (controlled mode).
`tabSelected`	`TabState`	Tracks the currently selected tab (controlled mode).
`setOpen`	`Dispatch<SetStateAction<boolean>>`	Setter for controlling the `open` state.
`setTabSelected`	`Dispatch<SetStateAction<TabState>>`	Setter for controlling the `tabSelected` state.
`initialOpen`	`boolean`	Initial state for whether the drawer is open (uncontrolled mode).
`tabSelectedColor`	`string`	Customizes the color of the selected tab. Default is `primary`.
`onTabChange`	`(key: string) => void`	Callback function triggered when a tab changes.

Custom Hooks

The useTabs hook provides state management for the app bar. Use it to manage the open and tabSelected states dynamically.

import { useTabs } from "custom-app-bar";

const { open, tabSelected, toggleTab } = useTabs({
  tabs,
  initialOpen: false,
  onTabChange: (key) => console.log(`Tab changed to: ${key}`),
});

Examples

Rendering Tabs Dynamically

const tabs = [
  { key: "home", label: "Home", icon: <HomeIcon /> },
  { key: "settings", label: "Settings", icon: <SettingsIcon /> },
  { key: "profile", label: "Profile", icon: <AccountCircleIcon /> },
];

const components = {
  home: <HomePage />,
  settings: <SettingsPage />,
  profile: <ProfilePage />,
};

<CustomAppBar tabs={tabs} components={components} />;