Custom Data

Custom data is additional information that can be added to the default data of Stream Call. It is an object with key-value pairs that can be attached to users, events, and pretty much almost every domain model in the Stream Video SDK.

The type definition is the following:

export type Custom = {
  [key: string]: any; // where `any` should be JSON-serializable value
};

Adding custom data

Adding extra data can be done through the Server-Side SDKs or through the Client SDKs. In the Stream Video SDK, you can add extra data when creating/updating a user, event, reaction and other models.

As a simple example, let’s see how you can add a new topic field to a call instance.

const call = client.call(type, id);
await call.getOrCreate({
  data: { custom: { topic: 'Monthly sync' } },
});

// or update a custom field
await call.update({
  custom: { topic: 'Weekly sync' },
});

Reading custom data

The custom data is exposed through the custom state property and useCallCustomData() hook:

import { useEffect } from 'react';
import { useCallStateHooks } from '@stream-io/video-react-sdk';

const { useCallCustomData } = useCallStateHooks();
const custom = useCallCustomData();

const topic = custom?.topic;
console.log('The topic of the current call is:', topic);

useEffect(() => {
  console.log('The topic is changed to:', custom?.topic);
}, [custom]);

Troubleshooting

Ringing calls