Provider Setup

RoomKitProvider

All RoomKit hooks require the RoomKitProvider to be mounted in your component tree.

import { RoomKitProvider } from '@roomkit/react';

function App() {
    return (
        <RoomKitProvider config={{ apiUrl: '/api/roomkit' }}>
            <YourApp />
        </RoomKitProvider>
    );
}

Props

interface RoomKitProviderProps {
    config: RoomKitConfig;
    children: React.ReactNode;
}

RoomKitConfig

interface RoomKitConfig {
    apiUrl: string;
    fetchOptions?: RequestInit;
}

Prop	Type	Required	Description
`apiUrl`	`string`	Yes	Base URL for all API requests (e.g., `/api/roomkit`)
`fetchOptions`	`RequestInit`	No	Default fetch options (headers, credentials, etc.)

Custom Headers

Use fetchOptions to add authentication headers:

<RoomKitProvider
    config={{
        apiUrl: 'https://api.example.com/roomkit',
        fetchOptions: {
            headers: {
                Authorization: `Bearer ${getToken()}`,
            },
        },
    }}
>
    <App />
</RoomKitProvider>

useRoomKitConfig

Access the provider configuration from any child component:

import { useRoomKitConfig } from '@roomkit/react';

function MyComponent() {
    const { apiUrl, fetchOptions } = useRoomKitConfig();
    // ...
}

Throws if used outside of a <RoomKitProvider>.