Framework Hooks
useSonifier for React, Vue, and Svelte—same API, different reactivity primitives.
All framework packages export a useSonifier(initialConfig?) hook with the same capabilities.
They differ only in how reactive state is exposed.
Shared API
| Field | Description |
|---|---|
sonify | (data, method, options?) => Promise<SonifierResult> |
play | (audioBuffer) => Promise<void> |
stop | () => void — stops current playback (does not cancel generation) |
getConfig | () => Required<SonifierConfig> |
setConfig | (config) => void |
getSonifier | () => Sonifier |
isPlaying | Whether a sonify or play operation is in progress |
error | Last SonificationError or null |
result | Last SonifierResult or null |
React
State values are plain React state.
import { useSonifier } from '@uturi/sonification/react';
const {
sonify,
play,
stop,
getConfig,
setConfig,
isPlaying, // boolean
error, // SonificationError | null
result, // SonifierResult | null
getSonifier,
} = useSonifier(initialConfig);Vue
State values are Refs.
import { useSonifier } from '@uturi/sonification/vue';
const {
sonify,
play,
stop,
getConfig,
setConfig,
isPlaying, // Ref<boolean>
error, // Ref<SonificationError | null>
result, // Ref<SonifierResult | null>
getSonifier,
} = useSonifier(initialConfig);Svelte
State values are Writable stores. Subscribe with $ in templates.
import { useSonifier } from '@uturi/sonification/svelte';
const {
sonify,
play,
stop,
getConfig,
setConfig,
isPlaying, // Writable<boolean>
error, // Writable<SonificationError | null>
result, // Writable<SonifierResult | null>
getSonifier,
} = useSonifier(initialConfig);<button disabled={$isPlaying}>{$isPlaying ? 'Playing...' : 'Play'}</button>See Quick Start for full component examples.