Observe data about the logged-in user to customize the experience
import { user } from '@cord-sdk/react';
const data = user.useViewerData();
import { user } from '@cord-sdk/react';
const data = user.useViewerData();
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>
<p>Organization ID: {data.organizationID}</p>
)}
</div>
);
The API provides an object which has the following fields:
name
when set.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".