SDK/FRAMEWORKS
React
Use @edithpro/react: a provider for your app, a button, and a hook for everything else.
On this page
1. Wrap your app #
App.tsx
import { EdithProProvider } from '@edithpro/react'; export function App() { return ( <EdithProProvider clientId="ep_live_abc123" workspaceId="ws_64f2a1b3" theme="light" onStop={(id, seconds) => console.log('Saved', id, seconds)} > <YourApp /> </EdithProProvider> );}
The provider takes every option from Configuration, including callbacks. It creates the SDK once, calls init(), and cleans up when it unmounts.
2. Add the button #
Composer.tsx
import { EdithProButton } from '@edithpro/react'; <EdithProButton className="btn btn-primary" onClick={() => track('record')}> <VideoIcon /> Record video</EdithProButton>
Pass anything as children: text, an icon, or both. Without children the label is “Record Screen”. Your onClick runs first, then the popup opens.
3. Use the hook #
RecordingStatus.tsx
import { useEdithPro } from '@edithpro/react'; export function RecordingStatus() { const { isRecording, isPaused, duration, pause, resume, stop } = useEdithPro(); if (!isRecording) return null; return ( <div> {isPaused ? 'Paused' : 'Recording'} · {duration}s <button onClick={isPaused ? resume : pause}>{isPaused ? 'Resume' : 'Pause'}</button> <button onClick={stop}>Stop</button> </div> );}
useEdithPro() must be called inside <EdithProProvider>, or it throws an error.
React API referenceEvery prop and return value.Read more →Build a custom UIUse the hook without our popup.Read more →
Was this page helpful? @edithpro/sdk 1.0.5 · Edit this page