registerToolbarItem

Description

Registers a React component under a given type name so it can be referenced from Toolbar items. After registration, the toolbar will instantiate the provided component when an item uses the corresponding comp/type identifier.

Usage

registerToolbarItem(
  type: string, 
  handler: React.ComponentType<any>, 
  config?: { menu?: boolean }
): void;

Parameters

The function accepts the following parameters:

• type - (required) the unique name that identifies the custom toolbar component

• handler - (required) the React component that implements the custom toolbar item

• config - (optional) a configuration object with the following property:

  • menu - (optional) if true, registeres a separate renderer for the overflow menu

Examples

Register custom component as toolbar's element

import { Toolbar, registerToolbarItem } from "@svar-ui/react-toolbar";
import { Text } from "@svar-ui/react-core";

// register custom component
registerToolbarItem("text", Text);

<Toolbar
  items={[
    { id: "label", text: "Toolbar with text input" },
    { id: "search", comp: "text" },
  ]}
/>

Create custom button control for toolbar

In MyControl.jsx

export default function MyControl({ menu, text, onClick }) {
  return (
    <button className={menu ? "menu" : ""} onClick={onClick}>
      {text}
    </button>
  );
}

.my-control.css

.menu {
  font-weight: bold;
}

• custom control can fire onClick event on activation
• menu property will be set to true when the component is inside of a popup menu
• any other property set in the item object will be available as a prop

In App.jsx:

import { Toolbar, registerToolbarItem } from "@svar-ui/react-toolbar";
import MyControl from "./MyControl.jsx";

// register custom component
registerToolbarItem("cb", MyControl);

<Toolbar
  items={[
    { id: "label", text: "Toolbar with custom button" },
    { id: "search", comp: "cb" },
  ]}
/>

Create custom input control for toolbar

In MyControl.jsx:

export default function MyControl({ value, onChange, type = "text" }) {
  return (
    <input
      type={type}
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

• value property will contain initial value
• changes to value must be propagated via onChange and will be reflected in the toolbar's state
• any other property set in the item object will be available as a prop

In App.jsx:

import { Toolbar, registerToolbarItem } from "@svar-ui/react-toolbar";
import MyControl from "./MyControl.jsx";

// register custom component
registerToolbarItem("ci", MyControl);

<Toolbar
  items={[
    { id: "label", text: "Toolbar with custom input" },
    { id: "search", comp: "ci", type: "search" },
  ]}
/>

Registering a separate renderer for the overflow menu

You can register two different components under the same type:

• the first one, Segmented, for the default toolbar mode
• the second one, ButtonList, specifically for the menu mode, by passing { menu: true } as the config argument

If no menu-specific component is registered, the default component is reused for both.

<script>
  import { Toolbar, ButtonList, registerToolbarItem } from "@svar-ui/react-toolbar";
  import { Segmented } from "@svar-ui/react-core";

  // register component for the `toolbar` mode
  registerToolbarItem("segmented", Segmented);
  // register a separate component for the `menu` mode
  registerToolbarItem("segmented", ButtonList, { menu: true });

  const items = [
  // ... more toolbar items
    {
      id: "mode",
      comp: "segmented",
      value: "1",
      options: [
        { id: "1", label: "All" },
        { id: "2", label: "Active" },
      ],
    },
  ];
</script>

<Toolbar items={items} />

The choice which component (Segmented or ButtonList) to render is resolved automatically based on the item's current location:

• horizontal Segmented component is used when the item is rendered directly in the toolbar
• the ButtonList component is used if the same item collapses into the overflow menu