Skip to content

@sibilance.is/client v0.1.0-alpha.4


@sibilance.is/client / react / SibilanceProvider

Function: SibilanceProvider() ​

ts
function SibilanceProvider(__namedParameters): Element;

Defined in: CmdPr/sibilance/client/src/components/providers/SibilanceProvider.tsx:180

Provider component for Sibilance voice surveys Wrap your app with this to enable voice survey interactions

This provider automatically wraps VowelProvider, so you only need one provider. Floating cursor is enabled by default.

Parameters ​

ParameterType
__namedParametersSibilanceProviderProps

Returns ​

Element

Examples ​

tsx
import { SibilanceProvider, SurveyMicButton } from '@sibilance.is/client/react';
import { sibilanceClient } from './sibilance.client';

function App() {
  return (
    <SibilanceProvider client={sibilanceClient}>
      <SurveyMicButton surveyId="your-survey-id" />
    </SibilanceProvider>
  );
}
tsx
<SibilanceProvider client={sibilanceClient} floatingCursor={false}>
  <SurveyMicButton surveyId="your-survey-id" />
</SibilanceProvider>
tsx
<SibilanceProvider 
  client={sibilanceClient}
  floatingCursor={ { 
    enabled: true,
    appearance: { cursorColor: '#2563eb' }
  }}
>
  <SurveyMicButton surveyId="your-survey-id" />
</SibilanceProvider>