Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Edit user profile

Copy link

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 start using the EditUserProfile module, implement the following code:

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

List of properties

Copy link

The following table lists the properties of the EditUserProfile module.

Property nameTypeDescription

children

ReactElement

Specifies the child components of the EditUserProfileProvider. (Default: null)

onCancel

function

Specifies the prop to execute custom operations when the cancel button is clicked. (Default: null)

onThemeChange

function

Specifies the prop to receive callback when the toggle button to switch between light theme and dark theme. (Default: Light).

onEditProfile

function

Specifies the prop to receive callback once the user profile has been updated.


Context

Copy link

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

Copy link

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';

List of properties

Copy link

The following table lists the properties of EditUserProfileProvider.

Property nameTypeDescription

children

ReactElement

Specifies the child components of the EditUserProfileProvider. (Default: null)

onCancel

function

Specifies the prop to execute custom operations when the cancel button is clicked. (Default: null)

onThemeChange

function

Specifies the prop to receive callback when the toggle button to switch between light theme and dark theme is clicked.

onEditProfile

function

Specifies the prop to receive callback once the user profile has been updated.

useEditUserProfileProviderContext

Copy link

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';

List of properties

Copy link

The following table lists the properties of EditUserProfileProvider.

Property nameTypeDescription

children

ReactElement

Specifies the child components of the EditUserProfileProvider. (Default: null)

onCancel

function

Specifies the prop to execute custom operations when the cancel button is clicked. (Default: null)

onThemeChange

function

Specifies the prop to receive callback when the toggle button to switch between light theme and dark theme. (Default: Light)

onEditProfile

function

Specifies the prop to receive callback once the user profile has been updated.


EditUserProfileUI

Copy link

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';