Observe user data

Observe user details for your UI


Overview

This method allows you to observe data about a user, including live updates.
import { user } from '@cord-sdk/react';
const data = user.useUserData(userID);
Copy

Usage

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

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

UserID
The user's ID. This is unique within an application.

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.

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.

Fetching multiple users


userIDs

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