Skip to main content
Version: 2.0.0

UserUpdateContainer

Handles updating the user's information.

Usage#

import React from "react";
import {
UserUpdateContainer,
UserUpdateProfilePic,
UserUpdateEmail,
UserUpdateFirstName,
UserUpdateLastName,
UserUpdatePhone,
UserUpdateButton,
Alert,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomUserUpdateView = () => {
return (
<UserUpdateContainer
onSuccess={(userObject) => {
console.log(userObject);
}}
onFailure={(err) => {
console.error(err.message);
}}
>
<Alert />
<UserUpdateProfilePic onClick={() => {}} />
<div>
<UserUpdateEmail label="Email" />
</div>
<div>
<UserUpdateFirstName label="First name" />
<UserUpdateLastName label="Last name" />
</div>
<div>
<UserUpdatePhone label="Phone number" />
</div>
<UserUpdateButton />
</UserUpdateContainer>
);
};

Reference#

UserUpdateContainer#

Props#

onSuccess#

(userObject) โ‡’ void

Callback function called when the user updates profile information successfully.

onFailure#

(errorObject) โ‡’ void

Callback function called when the update fails.

Children components#

Alert#

Displays the relevant errors or success messages.


UserUpdateProfilePic#

Shows the user's profile picture.

Props#

onClick#

() => void

Callback function called when the user clicks on the profile picture.


UserUpdateEmail#

Instance of Input

Input field component that shows the user's email.


UserUpdateFirstName#

Instance of Input

Input field component to receive the first name of the user.


UserUpdateLastName#

Instance of Input

Input field component to receive the last name of the user.


UserUpdatePhone#

Instance of Input

Input field component to receive the phone of the user.


UserUpdateButton Required#

Instance of Button

A button component that submits the user update form.

Props#

name#

string?

The title displayed inside the button