react

@tabkit/react

React components and hooks for rendering, playing, and editing tablature.

TabSheet — Live Preview

Static tablature renderer as a React component. Change the controls to see the component re-render.

InstrumentThemeTuningLeft-Hand

<TabSheet
  measures={measures}
  instrument="guitar"
  theme="light"
  width={900}
  showTuning={true}
  leftHanded={false}
/>

TabEditor — Interactive Editor

Click cells to enter fret numbers. The editor outputs TabMeasure[] on every change.

import { TabEditor } from "@tabkit/react";

<TabEditor
  instrument="guitar"
  theme="light"
  measures={2}
  width={900}
  onChange={(measures) => console.log(measures)}
/>

useTabPlayer Hook

Low-level hook for full control over the playback engine. Returns a ref, controls, and state.

Tempo120 bpm1:1

import { useTabPlayer } from "@tabkit/react";

function MyPlayer({ measures }) {
  const {
    ref, play, pause, stop, seek,
    isPlaying, currentMeasure, currentBeat, setTempo,
  } = useTabPlayer({
    measures,
    instrument: "guitar",
    tempo: 120,
    loop: true,
    onNote: (notes, m, b, tempo) => audio.playNotes(notes, tempo),
  });

  return (
    <div>
      <div ref={ref} />
      <button onClick={isPlaying ? pause : play}>
        {isPlaying ? "Pause" : "Play"}
      </button>
    </div>
  );
}

useTabEditor Hook

Low-level hook for building custom editors with undo/redo support.

import { useTabEditor } from "@tabkit/react";

function MyEditor() {
  const { ref, measures, undo, redo, clear } = useTabEditor({
    instrument: "guitar",
    initialMeasures: 4,
    onChange: (m) => console.log(m),
  });

  return (
    <div>
      <div ref={ref} />
      <button onClick={undo}>Undo</button>
      <button onClick={redo}>Redo</button>
      <button onClick={clear}>Clear</button>
    </div>
  );
}

API Quick Reference

Components

Name	Type	Description
<TabSheet />	Component	Static tablature renderer
<TabPlayer />	Component	With built-in playback controls
<TabEditor />	Component	Interactive tab editor

Hooks

Name	Type	Description
useTabPlayer(opts)	Hook	Full playback control with ref
useTabEditor(opts)	Hook	Editor with undo/redo