Skip to main content

DialstackComponentsProvider

The provider makes the DialStack instance and client secret available to all child components.

Usage​

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

const dialstack = initialize({
  publishableKey: 'pk_live_YOUR_KEY',
});

function App() {
  return (
    <DialstackComponentsProvider dialstack={dialstack} clientSecret="cs_live_...">
      <YourApp />
    </DialstackComponentsProvider>
  );
}

Props​

PropTypeRequiredDescription
dialstackDialStackInstanceYesInstance from initialize()
clientSecretstring | ClientSecretResponseYesSession token from your backend
childrenReactNodeYesChild components

clientSecret​

The clientSecret prop accepts either a string or the full session response object:

// String only - you handle refresh
<DialstackComponentsProvider
  dialstack={dialstack}
  clientSecret="cs_live_abc123..."
>

// Full response - SDK handles refresh automatically
<DialstackComponentsProvider
  dialstack={dialstack}
  clientSecret={{
    client_secret: "cs_live_abc123...",
    expires_at: "2025-01-15T12:00:00Z"
  }}
>

useDialstackComponents Hook​

Access the provider context in child components:

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

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

  return <div>{clientSecret ? 'Connected' : 'Not connected'}</div>;
}

Return Value​

interface UseDialstackComponentsReturn {
  dialstack: DialStackInstance;
  clientSecret: string | ClientSecretResponse;
}

Error: Missing Provider​

If you use a component outside the provider, you'll see this error:

Error: Could not find DialStack context; You need to wrap your app
in a <DialstackComponentsProvider> provider.
See https://docs.dialstack.ai/sdks/react for setup instructions.

Fix: Wrap your component tree with the provider:

// Before (error)
function App() {
  return <CallLogs />;
}

// After (working)
function App() {
  return (
    <DialstackComponentsProvider dialstack={dialstack} clientSecret={secret}>
      <CallLogs />
    </DialstackComponentsProvider>
  );
}

Multiple Providers​

You can use multiple providers for different accounts:

function MultiAccountDashboard() {
  return (
    <div>
      <DialstackComponentsProvider dialstack={dialstack} clientSecret={accountASecret}>
        <h2>Account A</h2>
        <CallLogs />
      </DialstackComponentsProvider>

      <DialstackComponentsProvider dialstack={dialstack} clientSecret={accountBSecret}>
        <h2>Account B</h2>
        <CallLogs />
      </DialstackComponentsProvider>
    </div>
  );
}

Complete Example​

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

const dialstack = initialize({
  publishableKey: 'pk_live_YOUR_KEY',
  appearance: {
    theme: 'auto',
    variables: {
      colorPrimary: '#6772E5',
    },
  },
});

interface Session {
  client_secret: string;
  expires_at: string;
}

function App() {
  const [session, setSession] = useState<Session | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchSession() {
      try {
        const response = await fetch('/api/dialstack/session', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ accountId: 'acct_123' }),
        });

        if (!response.ok) {
          throw new Error('Failed to create session');
        }

        const data = await response.json();
        setSession(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error');
      }
    }

    fetchSession();
  }, []);

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!session) {
    return <div>Loading...</div>;
  }

  return (
    <DialstackComponentsProvider dialstack={dialstack} clientSecret={session}>
      <div className="dashboard">
        <h1>Voice Dashboard</h1>
        <CallLogs />
        <Voicemails userId="user_123" />
      </div>
    </DialstackComponentsProvider>
  );
}

export default App;

Next Steps​