@cashu/coco-react

⚠️ Release candidate: Coco is stabilizing for v1, but breaking changes may still land before the final 1.0 release. Pin versions in production.

React hooks and providers for integrating a Coco Manager into React applications.

The package exports the CocoCashuProvider convenience wrapper, the underlying providers, operation-oriented hooks such as useSendOperation, useReceiveOperation, useMintOperation, and useMeltOperation, plus derived-data hooks such as usePaginatedHistory, useBalances, and useTrustedBalance.

Install

npm install @cashu/coco-react @cashu/coco-core react

react is a peer dependency. The current package peer range targets React 19.

Usage

import type { Manager } from '@cashu/coco-core';
import { CocoCashuProvider, useSendOperation } from '@cashu/coco-react';

function SendButton() {
  const { prepare, execute, currentOperation, executeResult, isLoading } = useSendOperation();
  const awaitingConfirmation = currentOperation?.state === 'prepared';

  async function handleSend() {
    if (awaitingConfirmation) {
      await execute();
      return;
    }

    await prepare({ mintUrl: 'https://mint.example', amount: 100 });
  }

  return (
    <button disabled={isLoading} onClick={() => void handleSend()}>
      {awaitingConfirmation ? 'Confirm send' : executeResult ? 'Sent' : 'Prepare send'}
    </button>
  );
}

export function App({ manager }: { manager: Manager }) {
  return (
    <CocoCashuProvider manager={manager}>
      <SendButton />
    </CocoCashuProvider>
  );
}

Each operation hook stays bound to one local operation flow for the lifetime of that hook instance. It starts unbound until you call the hook's creation action such as prepare(), and you can also initialize it from an existing operation or operation id for resume screens. That initial hook argument is only used on the first render; if a mounted component needs to switch to a different operation, remount the hook or component with a new React key.

See the docs in packages/docs for provider composition and hook usage details.