Handles updating the user's information.

Usage

import React from "react";

import {

UserUpdateContainer,

UserUpdateProfilePic,

UserUpdateEmail,

UserUpdateFirstName,

UserUpdateLastName,

UserUpdatePhone,

UserUpdateButton,

AlertWithContext,

} 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);

}}

>

<AlertWithContext />

<UserUpdateProfilePic onClick={() => {}} />

<UserUpdateEmail label="Email" />

<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

AlertWithContext

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

---