Cord LogoDocs
Sign inStart now

Observe user data

User API /
Ask the Community

Observe user details for your UI

Overview #

This method allows you to observe data about a user, including live updates.
React:
import { user } from '@cord-sdk/react';
const data = user.useUserData(userID);
Vanilla JavaScript:
const ref = window.CordSDK.user.observeUserData(userID, callback);
window.CordSDK.user.unobserveUserData(ref);
import { user } from '@cord-sdk/react';
const data = user.useUserData(userID);
Copy

Usage #

React:
import { user } from '@cord-sdk/react';
const data = user.useUserData('user-123');
return (
  <div>
    {!data && "Loading..."}
    {data && (
      <p>User name: {data.name}</p>
      <p>User short name: {data.shortName}</p>
      <p>User profile picture: <img src={data.profilePictureURL} /></p>
    )}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.user.observeUserData(
  'user-123',
  (data) => {
    // Received an update!
    console.log("User name", data.name);
    console.log("User short name", data.shortName);
    console.log("User profile picture URL", data.profilePictureURL);
  }
);
import { user } from '@cord-sdk/react';
const data = user.useUserData('user-123');
return (
  <div>
    {!data && "Loading..."}
    {data && (
      <p>User name: {data.name}</p>
      <p>User short name: {data.shortName}</p>
      <p>User profile picture: <img src={data.profilePictureURL} /></p>
    )}
  </div>
);
Copy

React:
import { user } from '@cord-sdk/react';
const data = user.useUserData(['user-123', 'user-456']);
return (
  <div>
    {!data && "Loading..."}
    {data && (
      {Object.entries(data).map(([id, userData]) => (
        <div key={id}>
          <p>User ID: {id}</p>
          <p>User name: {userData.name}</p>
          <p>User profile picture: <img src={userData.profilePictureURL} /></p>
        </div>
      ))}
    )}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.user.observeUserData(
  ['user-123', 'user-456'],
  (data) => {
    // Received an update!
    console.log("User-123 name", data['user-123']?.name);
    console.log("User-456 name", data['user-456']?.name);
  }
);
import { user } from '@cord-sdk/react';
const data = user.useUserData(['user-123', 'user-456']);
return (
  <div>
    {!data && "Loading..."}
    {data && (
      {Object.entries(data).map(([id, userData]) => (
        <div key={id}>
          <p>User ID: {id}</p>
          <p>User name: {userData.name}</p>
          <p>User profile picture: <img src={userData.profilePictureURL} /></p>
        </div>
      ))}
    )}
  </div>
);
Copy

Available Data #

The API provides an object which has the following fields:

id #

string
The user's ID. This is unique within a project.

name #

string | null
The user's name.

shortName #

string | null
The user's short name. In most cases, Cord components will prefer using this name over name when set.

profilePictureURL #

string | null
A URL to the user's profile picture.

metadata #

EntityMetadata
Any metadata that has been set for the user.

displayName #

string
The primary display name of the user. This is a readonly field that's provided as a convenience. Its value is the user's shortName or name, preferring shortName if both are set, or the string "unknown" if neither is set.

secondaryDisplayName #

string
The secondary display name of the user, in cases where you might want to display a secondary name (such as in a subtitle). This is a readonly field that's provided as a convenience. Its value is the user's name or shortName, preferring name if both are set, or the string "Unknown" if neither is set.

What this function returns #

Fetching a single user #

The hook will initially return undefined while the data loads from our API. Once it has loaded, your component will re-render and the hook will return an object containing the fields described under "Available Data" above. The component will automatically re-render if any of the data changes, i.e., this data is always "live".

Fetching multiple users #

The hook will initially return an empty object while the data loads from our API. Once some data has loaded, your component will re-render and the hook will return an object with a property for each requested user ID. If the property is missing, the data for that user has not yet been loaded; if there's no user with that ID, it will be null; and otherwise it will be an object which will contain the fields described under "Available Data" above. The component will automatically re-render if any of the data changes or as more data is loaded, i.e., this data is always "live".

Arguments this function takes #

This function can be called in two ways:

Fetching a single user #

userID #

required
string
The user to fetch data for.

options #

optional
ReactUserDataOptions

This is an object with the following fields:

Show property details

Fetching multiple users #

userIDs #

required
string[]
The list of user IDs to fetch data for.

options #

optional
ReactUserDataOptions

This is an object with the following fields:

Show property details

Not finding the answer you need? Ask our Developer Community

Ask Cordy