react-hooks

Codama ➤ Renderers ➤ JavaScript React Hooks

This package generates React hooks from your Codama IDLs that wrap the JavaScript client generated by @codama/renderers-js. The generated hooks provide subscription-aware account fetching, instruction execution, PDA derivation, and program utilities — all using @solana/kit and vanilla React hooks.

Installation

pnpm install @codama/renderers-js-react

Peer dependency: @codama/renderers-js must be installed separately.

Usage

First generate the JS client, then generate hooks that wrap it:

import { visit } from '@codama/visitors-core';
import { renderVisitor as renderJsVisitor } from '@codama/renderers-js';
import { renderVisitor as renderHooksVisitor } from '@codama/renderers-js-react';

// 1. Generate the JS client
await visit(idl, renderJsVisitor('src/', { kitImportStrategy: 'rootOnly' }));

// 2. Generate React hooks alongside it
await visit(
    idl,
    renderHooksVisitor('src/', {
        clientPackage: '../',
        generatedFolder: 'src/generated',
        kitImportStrategy: 'rootOnly',
    }),
);

The hooks are written to hooks/ inside the generated folder, importing from the JS client via clientPackage.

What Gets Generated

Hook pattern	Description
use<Account>(address, config)	Subscribe to an account via WebSocket, auto-decode
use<Account>FromSeeds(seeds, cfg)	Derive PDA → subscribe (only if account has a PDA link)
use<Account>s(addresses, config)	Batch-fetch multiple accounts via getMultipleAccounts
use<Instruction>(config)	Returns send(input) that builds, signs, and confirms
use<Pda>Address(seeds, config)	Derive a PDA address, reactive to seed changes
useProgram<Name>(config)	Program address + error decoder

All generated files include 'use client' and a barrel index.ts.

Options

Name	Type	Default	Description
clientPackage	string	'../'	Import path to the generated JS client from the hooks directory
deleteFolderBeforeRendering	boolean	true	Clean the output directory before generating
formatCode	boolean	true	Format generated code with Prettier
generatedFolder	string	'src/generated'	Output directory relative to the package folder
kitImportStrategy	'granular' | 'preferRoot' | 'rootOnly'	'preferRoot'	How to resolve @solana/* imports
nameTransformers	Partial<NameTransformers>	{}	Override generated hook and client reference names
prettierOptions	PrettierOptions	{}	Prettier configuration for code formatting