Hooks

useForm

The useForm hook gives a simple way to interact with the sync and completions calls.

import { useForm } from '@vocale/react'

const {
  requestCompletion,
  syncForm,
} =useForm(
  formRef: (string | React.RefObject<HTMLFormElement>), 
  options: { 
    pathname?: string,
    onCompletion?: (completion: T) => void,
    onError?: (error: string) => void
  }
)

args

• formRef required (string | React.RefObject<HTMLFormElement>):

• • The form being used for completion, normaly you should use a unique id. You can also use a reference to a <form /> element in case you are using this library together with the assistant-script.js.

• options required FormEvents:

• • pathname string
• • • You can set this up in case this form appears in more than one page of your app, so you can tag the completions for different paths within your app.
• • onCompletion (completion: T) => void
• • • This callback will trigger after the requestCompletion method is called and resolved successfully.
• • onError (error: string) => void
• • • This will fire in case anything goes wrong after calling requestCompletion.

return

• requestCompletion (audio: Blob, audioDuration: number, data?: FormWithValues)

• • A function used to request a completion from Vocale by sending an audio Blob, and an optional payload with the current data of the form.

• syncForm (form: ReportFormSchema) => Promise<SyncResponse> | undefined

• • A function to synchronize a form with Vocale. The first time this function runs it will create the form on your configured site, and subsequent calls will update the schema.

useVoiceRecording

The useVoiceRecording hook simplifies the process of capturing audio recordings from the user's microphone within React applications, offering a straightforward solution for integrating voice input functionalities.

import { useForm } from '@vocale/react'

const {
  isRecording,
  startRecording,
  stopRecording,
} = useVoiceRecording(
  options: { 
    onFinish?: (blob: Blob, duration:number) => void,
    onVolumeChange?: (volume: number) => void,
    onError?: (error: string) => void;
  }
)

args

• options
• • onFinish (blob: Blob, duration: number) => void
• • • Will trigger after calling the stopRecording function with the recorded Blob and the duration in miliseconds.
• • onVolumeChange (volume: number) => void
• • • Will trigger on every requestAnimationFrame with a value from 0 to 100. This is useful to render some kind of visual aid for the user when recording the audio.
• • onError (error: string) => void
• • • Will trigger in case anything goes wrong when recording the audio.

return

• • isRecording boolean
• • • A boolean value indicating whether the hook is currently recording or not.
• • startRecording () => void
• • • A function to trigger the audio recording from the user's microphone.
• • stopRecording () => void
• • • A function to stop the ongoing audio recording.