@chordsketch/react API reference
Per-component and per-hook reference for every export from
packages/react/src/index.ts.
The library is split between a ChordPro surface and an iReal
Pro surface; both surfaces are import-shaped the same way and
share the same wasm runtime under the hood.
For copy-paste-ready embedding recipes, see
Embed in a React app. The pages below assume you
already have @chordsketch/react installed and want the precise
prop / parameter contract for a specific export.
ChordPro
| Topic | Covers |
|---|---|
<ChordSheet> + AST hooks |
<ChordSheet>, renderChordproAst, useChordRender, useChordproAst and the AST types |
<ChordProEditor> |
One-component editor + preview + transpose composite (renamed from <Playground> in v0.3.0) |
<ChordProPreview> |
Preview pane + format toggle + transpose controls, no source editor (new in v0.3.0) |
| Editors | <ChordTextarea> (textarea baseline, was <ChordEditor>), <ChordSourceArea> (CodeMirror, was <SourceEditor>), chordProLanguage, chordProTagTable |
| Layout primitives | <SplitLayout>, <RendererPreview> |
<Transpose> + useTranspose |
Accessible ± / reset control and its standalone hook |
<ChordDiagram> + useChordDiagram |
Chord-voicing SVG renderer |
<PdfExport> + usePdfExport |
Lazy-loaded PDF export button + hook |
| Chord source-edit helpers | applyChordReposition, lyricsOffsetToSourceColumn |
iReal Pro
| Topic | Covers |
|---|---|
| Components | <IrealBarGrid> (was <IrealEditor>), <IrealPreview>, <IrealProEditor> (was <IrealPlayground>) |
| Hooks | useIrealParse, useIrealSerialize, useIrealRender |
| AST helpers | irealChord*ToString, irealCanonicalSymbolText, irealIs* |
Other
version()— runtime version helper.useDebounced— re-exported utility, documented on the<ChordSheet>page where it is most often used.