Edit user profile

In UIKit for React, you can make changes to the user profile through the EditUserProfile module. If a user clicks on their own avatar, a pop-up view of their user profile appears on the screen. The user can edit any of the profile information in the view such as profile image and nickname. They can also select whether to use the light or dark theme.

To view the image in full screen, click on the

To start using the EditUserProfile module, implement the following code:

import EditUserProfile from '@sendbird/uikit-react/EditUserProfile';

The following table lists the properties of the EditUserProfile module.

To store and handle data that are used to build a working group EditUserProfile, Sendbird UIKit provides two context objects: EditUserProfileProvider and useEditUserProfile hook. EditUserProfileProvider is a context provider that manages all the logic and data used in the EditUserProfile view. useEditUserProfile is a context hook that allows access to the provider's data.

EditUserProfileProvider contains input props and internal data that handle all the operations in the module. The provider stores data from Chat SDK in real-time and exports them to the UI components. The following code shows how to start using EditUserProfileProvider.

import { EditUserProfileProvider } from '@sendbird/uikit-react/EditUserProfile/context';

The following table lists the properties of EditUserProfileProvider.

The useEditUserProfileProviderContext context hook exports the data in the provider to the UI components to create a functional channel view. Every UI component of any layer or level can get access to the data using the context hooks as long as they're inside the provider.

The following code shows how to start using useEditUserProfileProviderContext.

import { useEditUserProfileProviderContext } from '@sendbird/uikit-react/EditUserProfile/context';

The following table lists the properties of EditUserProfileProvider.

EditUserProfileUI is the only UI component in the EditUserProfile module and renders the view of the user profile. The following code shows how to implement the component.

import EditUserProfileUI from '@sendbird/uikit-react/EditUserProfile/components/EditUserProfileUI';