sel-custom-app-bar

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} />;

Development / Publishing

Installing Dependencies

To set up a development environment:

npm install

Building the Package

To build the package for distribution:

npm run build

License

This software is from The University of Texas at El Paso, Systems Ecology Lab. All Rights Reserved.