User

Import statement

import { User } from "@wfp/react"

The User component extends the functionality of the Avatar component by incorporating user-related information such as name and descriptions. This component is commonly used in main navigation and forms.

Usage

<User
  image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
  name="John Doe"
  alt="John Doe’s Avatar"
  showName
/>;

Component behaviour

• Avatar Display: Utilizes the Avatar component to display the user’s image or a fallback icon.
• Name and Descriptions: Optionally displays the user’s name, a brief description, and an extended description based on props.
• Customizable Appearance: Supports custom styling and component replacement through className and components props.

Accessibility

• The alt prop is crucial for screen reader accessibility, providing a text alternative for the avatar image.

Example

User with Initials

<User
  alt="Jane Doe’s avatar"
  name="Jane Doe"
  showName
  missingImage="letter"
/>;

User with extended description

<User
  image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
  alt="Jane Doe’s avatar"
  name="Jane Doe"
  ellipsis
  description={<p>Project Manager</p>}
  extendedDescription={
    <p>Additional details about Jane Doe</p>
  }
  showName
/>;

In this example, the User component displays an avatar with the image from the provided URL. If the URL is unavailable, the component defaults to the specified missing image mode. The user’s name, "Jane Doe," is displayed with an ellipsis for long names. Below the name, a brief description and an extended description provide additional information about the user.

Related

• Avatar