Fusion UI

Overview

The CommandMenu lets people jump to pages and run commands from the keyboard. Components anywhere in the app register their commands; the menu searches them fuzzily. Try it in this documentation with ⌘K or Ctrl+K.

"use client";

import {CommandMenuTrigger, IconPlane, useCommandMenu} from "@brynlabs/fusion-ui";
import React, {useEffect} from "react";

export const CommandMenuExample = () => {
  const {registerCommands} = useCommandMenu();

  useEffect(
    () =>
      registerCommands([
        {
          title: "Test",
          category: "Test",
          callback: () => {
            console.log("Test");
          },
          subtitle: "Test",
          icon: <IconPlane />,
        },
        {
          title: "Test 2",
          category: "Test 2",
          callback: () => {
            console.log("Test 2");
          },
          subtitle: "Test",
          icon: <IconPlane />,
        },
        {
          title: "Test 3",
          category: "Test",
          callback: () => {
            console.log("Test 3");
          },
          subtitle: "Test",
          icon: <IconPlane />,
        },
        {
          title: "Test 4",
          category: "Test 2",
          callback: () => {
            console.log("Test 4");
          },
          subtitle: "Test",
          icon: <IconPlane />,
        },
      ]),
    [registerCommands],
  );

  return <CommandMenuTrigger />;
};

External search

For results searched elsewhere, e.g. on a server, read the typed text from useCommandMenu().query and register the results with filter: false. They skip the fuzzy search and appear in the order they were registered, after the other commands. setLoading shows a spinner in the search field, overline adds a small line above the title and an id keeps an entry selected while results arrive.

"use client";

import {CommandMenuTrigger, IconSearch, useCommandMenu} from "@brynlabs/fusion-ui";
import React, {useEffect, useState} from "react";

const RECORDS = [
  {id: "1", title: "Website relaunch", client: "Acme Corp", type: "Project"},
  {id: "2", title: "Write invoice template", client: "Acme Corp › Website relaunch", type: "Task"},
  {id: "3", title: "Acme Corp", client: "Berlin", type: "Customer"},
];

/**
 * Results searched outside the menu (here: a fake server call) are registered with
 * `filter: false`, so the menu shows them as they are ranked instead of fuzzy-filtering them.
 */
export const CommandMenuSearchExample = () => {
  const {registerCommands, query, setLoading} = useCommandMenu();
  const [results, setResults] = useState<typeof RECORDS>([]);

  useEffect(() => {
    if (!query.trim()) return;
    setLoading(true);
    const timeout = setTimeout(() => {
      const needle = query.toLowerCase();
      setResults(RECORDS.filter(record => record.title.toLowerCase().includes(needle)));
      setLoading(false);
    }, 300);
    return () => {
      clearTimeout(timeout);
      setLoading(false);
    };
  }, [query, setLoading]);

  useEffect(
    () =>
      registerCommands(
        (query.trim() ? results : []).map(record => ({
          id: record.id,
          title: record.title,
          overline: record.client,
          subtitle: record.type,
          category: "Search results",
          filter: false,
          icon: <IconSearch />,
          callback: () => console.log(record.title),
        })),
      ),
    [query, results, registerCommands],
  );

  return <CommandMenuTrigger />;
};

Command Menu

Overview

External search