@karhu/react

React bindings and components for Karhu. Expects @karhu/core to be there.

Install

npm install @karhu/core @karhu/react

Usage

import { KarhuProvider, useKarhu, KarhuComponent, AddCommand } from '@karhu/react';

Hooks

useKarhu

A React hook to access Karhu context and Karhu adapter. Expects to find a Karhu instance in application context.

On every property input change the commandsList is updated.

Call exec with a command id to execute the command and get the entry graph back.

Types:

// Props
type Props = {
  input: string;
};

// Returns
type ChildrenProviderObject = {
  commandsList: Command[];
  exec: (id: string) => CommandRunResult;
};

Usage:

function MyKarhu({input}) {
  const { exec, commandsList } = useKarhu(input);
  return 'your-ui'
}

const karhu = new Karhu()

<KarhuProvider value={karhu}>
  <MyKarhu input="" />
</KarhuProvider>

Components

<KarhuProvider>

Provide a Karhu instance in React context.

Props:

type Props = {
  value: Karhu;
};

Usage:

const karhu = new Karhu()

<KarhuProvider value={karhu}>
{
  // application
}
</KarhuProvider>

<KarhuComponent>

A combined React context Consumer and Karhu adapter. Expects to find a Karhu instance in application context.

On every property input change the children get re-rendered and the commandsList is updated.

Call exec with a command id to execute the command and get the entry graph back.

Types:

type Props = {
  children: (obj: ChildrenProviderObject) => {};
  input: string;
};

type ChildrenProviderObject = {
  commandsList: Command[];
  exec: (id: string) => CommandRunResult;
};

Usage:

const karhu = new Karhu()

<KarhuProvider value={karhu}>
  <KarhuComponent input="">
    {({ commandsList, exec }) => {
      // what to render
    }}
  </KarhuComponent>
</KarhuProvider>

<AddCommand>

Component to add a command to a Karhu instance. Expects to find a Karhu instance in application context.

Props:

type AddCommandProps = {
  command: UnregisteredCommand;
};

Usage:

const karhu = new Karhu();
const command = Karhu.createCommand({
  name: 'command',
  keywords: ['command'],
  onExec: () => {},
  render: () => {},
});

<KarhuProvider value={karhu}>
  <AddCommand command={command} />
</KarhuProvider>;