# Custom Label

There may be a plethora of designs for label that is displayed above the participant video. The SDK's [default label shows](https://getstream.io/video/docs/react/v2/ui-components/participants/participant-view/):

- user's name
- microphone and camera mute state
- dominant speaker label
- connection quality indicator

![Default muted participant label](https://getstream.io/docs-assets/images/93b322a69dd4.png)

![Default un-muted participant label speaking](https://getstream.io/docs-assets/images/c4377a5187a0.png)

It is expected that the default component may not meet all the requirements of all the apps in the world. Therefore, we will look into ways, how to customize the contents of the participant label in this tutorial.

## Custom participant label

Our custom label will **include a human-readable call join time** in addition to what the design requirements were. To achieve this, we will need to override the whole participant`ParticipantViewUI` component. You can learn more about `ParticipantViewUI` customizations in [the participant view customizations guide](https://getstream.io/video/docs/react/v2/ui-cookbook/participant-view-customizations/).

To retrieve the data about the participant, whose view we are about to render, we use [`useParticipantViewContext`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx) context consumer hook.

```tsx
import { useParticipantViewContext } from "@stream-io/video-react-sdk";

import { getHumanReadableTimeElapsed } from "../utils";

const ParticipantDetails = () => {
  const { participant } = useParticipantViewContext();

  const readableTimeSinceJoined = getHumanReadableTimeElapsed(
    participant.joinedAt,
  );

  return (
    <div title={participant.name}>
      <span>{participant.name}</span>
      <span>{readableTimeSinceJoined}</span>
    </div>
  );
};

export const CustomParticipantViewUI = () => {
  return (
    <>
      <ParticipantDetails />
      {/* your other custom UI elements */}
    </>
  );
};
```

>
> **Note:** `participant.joinedAt` is a protobuf `Timestamp` (`{ seconds, nanos }`), not a JavaScript `Date`. Convert it before formatting — for example `new Date(Number(participant.joinedAt.seconds) * 1000)` — inside your own `getHumanReadableTimeElapsed` helper.
>

## Final steps

Now we can pass this custom `ParticipantViewUI` component down to our call layout components or directly to `ParticipantView` component in our custom call layout as described in the aforementioned [ParticipantView customizations guide](https://getstream.io/video/docs/react/v2/ui-cookbook/participant-view-customizations/).

```tsx {17}
import { useCallStateHooks } from "@stream-io/video-react-sdk";

import { CustomParticipantViewUI } from "../ParticipantViewUI";
import { CustomVideoPlaceholder } from "../VideoPlaceholder";

export const CustomCallLayout = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();

  return (
    <div>
      {/* your other custom UI elements */}
      {participants.map((participant) => (
        <div key={participant.sessionId}>
          <ParticipantView
            participant={participant}
            ParticipantViewUI={CustomParticipantViewUI}
            VideoPlaceholder={CustomVideoPlaceholder}
          />
        </div>
      ))}
    </div>
  );
};
```

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-cookbook/participant-label/](https://getstream.io/video/docs/react/v2/ui-cookbook/participant-label/).