@action-finder/react

React command palette provider with built-in search UI and runtime action registration.

Install

pnpm add @action-finder/react

Quick start

import type { SearchItem } from '@action-finder/core';
import {
  ActionFinderProvider,
  ActionFinderSearch,
  useRegisterActionFinderItem
} from '@action-finder/react';

const routes = [
  { path: '/', title: 'Home' },
  { path: '/tickets', title: 'Ticket management' }
];

const items: SearchItem[] = [
  {
    id: 'ticket-create-static',
    title: 'Create ticket',
    group: 'action',
    path: '/tickets',
    dataKey: 'ticket-create-action'
  }
];

function Toolbar() {
  useRegisterActionFinderItem({
    id: 'export-tickets',
    title: 'Export tickets',
    keywords: ['ticket export'],
    group: 'action',
    action: () => window.alert('Export tickets')
  });

  return null;
}

export function App() {
  return (
    <ActionFinderProvider routes={routes} items={items}>
      <Toolbar />
      <ActionFinderSearch />
    </ActionFinderProvider>
  );
}

Exports

• ActionFinderProvider
• useActionFinder
• useRegisterActionFinderItem
• ActionFinderSearch
• ActionFinderContextValue
• ActionFinderProviderProps
• ReactRouteLike

For shared types and DOM-action helpers, see @action-finder/core.

Repository and full docs:

• https://codeup.aliyun.com/605efecf7470561e6a71441e/taixiaoyou.git