Skip to main content

React SDK

The React SDK provides type-safe components for embedding call logs and voicemails into your React application.

Quick Start​

import { initialize, DialstackComponentsProvider, CallLogs, Voicemails } from '@dialstack/sdk';

// Initialize once at app startup
const dialstack = initialize({
  publishableKey: 'pk_live_YOUR_KEY',
});

function VoiceDashboard({ clientSecret }: { clientSecret: string }) {
  return (
    <DialstackComponentsProvider dialstack={dialstack} clientSecret={clientSecret}>
      <h1>Voice Dashboard</h1>
      <CallLogs />
      <Voicemails userId="user_123" />
    </DialstackComponentsProvider>
  );
}

Setup​

1. Initialize the SDK​

Initialize the SDK once at app startup, outside of any component:

import { initialize } from '@dialstack/sdk';

const dialstack = initialize({
  publishableKey: 'pk_live_YOUR_KEY',
  appearance: {
    theme: 'auto', // 'light' | 'dark' | 'auto'
  },
});

2. Wrap with Provider​

Wrap your app (or the part using DialStack components) with the provider:

import { DialstackComponentsProvider } from '@dialstack/sdk';

function App() {
  const [clientSecret, setClientSecret] = useState<string | null>(null);

  useEffect(() => {
    // Fetch from your backend
    fetch('/api/dialstack/session', { method: 'POST' })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.client_secret));
  }, []);

  if (!clientSecret) return <Loading />;

  return (
    <DialstackComponentsProvider dialstack={dialstack} clientSecret={clientSecret}>
      <YourApp />
    </DialstackComponentsProvider>
  );
}

3. Use Components​

Components automatically connect to the provider:

import { CallLogs, Voicemails } from '@dialstack/sdk';

function Dashboard() {
  return (
    <div>
      <CallLogs dateRange={{ start: '2025-01-01' }} />
      <Voicemails userId="user_123" />
    </div>
  );
}

Available Components​

ComponentDescriptionRequired Props
CallHistoryCompact call history for a phone numberphoneNumber
CallLogsCall history table with filtering and paginationNone
DialPlanVisual dial-plan viewer / editorNone
OnboardingPortalMulti-step account onboarding wizardNone
VoicemailsVoicemail list with audio playbackuserId

Hooks​

useDialstackComponents​

Access the DialStack instance inside the provider:

import { useDialstackComponents } from '@dialstack/sdk';

function CustomComponent() {
  const { dialstack, clientSecret } = useDialstackComponents();

  // Use for custom integrations
  return <div>Connected: {!!clientSecret}</div>;
}

TypeScript​

All components are fully typed. Import types as needed:

import type {
  DialStackInstance,
  CallLog,
  CallLogDisplayOptions,
  VoicemailDisplayOptions,
  AppearanceOptions,
} from '@dialstack/sdk';

Error Handling​

Handle component errors with callbacks:

<CallLogs
  onLoaderStart={() => console.log('Loading...')}
  onLoadError={(event) => {
    console.error('Failed to load:', event.error);
    // Show error UI or retry
  }}
/>

Next Steps​