Magnifying Dock React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import MagnifyingDock from "./MagnifyingDock";

export default function Example() {
  return (
    <MagnifyingDock
      items={[
        {
          "id": "library",
          "label": "Library",
          "icon": "▧",
          "color": "#bdadcd"
        },
        {
          "id": "canvas",
          "label": "Canvas",
          "icon": "✦",
          "color": "#ddb58d"
        },
        {
          "id": "palette",
          "label": "Palette",
          "icon": "◈",
          "color": "#9db5bf"
        },
        {
          "id": "notes",
          "label": "Notes",
          "icon": "≋",
          "color": "#c5c19d"
        }
      ]}
      activeId={"canvas"}
      size={52}
      magnification={1.55}
      background={"#27232dcc"}
      label={"Creative workspace"}
    />
  );
}

Using Magnifying Dock

Supply a compact set of labelled actions through items. activeId marks the current item and onSelect handles activation.

Adjust size and magnification together so enlarged icons fit the available width. Keep labels even when every item has an icon.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, label, icon?, color?, disabled? }. Icons accept React nodes; missing icons use the first label character.
onSelect	function	No	undefined	Called with (item, index) when an item is activated.
activeId	string	No	undefined	Optional active item id, marked with aria-current and a dot.
size	number	No	48	Base icon size in pixels.
magnification	number	No	1.55	Focused or hovered icon scale; neighbours grow by a smaller amount.
background	string	No	"#27232dcc"	Dock surface CSS colour, including alpha.
label	string	No	"Application dock"	Accessible group label.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.