Handles changing or removing the user's profile picture.

Usage

import React from "react";

import {

ProfilePicChangeContainer,

ProfilePicChangeCropper,

ProfilePicChangeRemoveButton,

ProfilePicChangeSelectButton,

ProfilePicChangeZoom,

ProfilePicChangeButton,

Alert,

} from "@pelcro/react-pelcro-js";

import "@pelcro/react-pelcro-js/dist/pelcro.css";

const ProfilePicChangeWrapper = ({ store }) => {

const {

state: { imageSrc },

} = useContext(store);

const currentProfilePicture = window.Pelcro.user.read().profile_photo;

return imageSrc ? (

<>

<ProfilePicChangeCropper />

<ProfilePicChangeZoom />

<ProfilePicChangeButton name="change picture" />

</>

) : (

<div>

{currentProfilePicture && <img src={currentProfilePicture} />}

<ProfilePicChangeSelectButton name="select picture" />

{currentProfilePicture && (

<ProfilePicChangeRemoveButton name="remove picture" />

)}

</div>

);

};

export const CustomProfilePicChangeView = () => {

return (

<ProfilePicChangeContainer

onChangeSuccess={() => {

console.log("changed!");

}}

onRemoveSuccess={() => {

console.log("removed!");

}}

onChangeFailure={(err) => {

console.error(err.message);

}}

onRemoveFailure={(err) => {

console.error(err.message);

}}

>

<Alert />

<ProfilePicChangeWrapper />

</ProfilePicChangeContainer>

);

};

Reference

ProfilePicChangeContainer

Props

onChangeSuccess

() ⇒ void

Callback function called when the picture is changed succesfully.

onRemoveSuccess

() ⇒ void

Callback function called when the picture is removed succesfully.

onChangeFailure

(errorObject) ⇒ void

Callback function called when changing the picture fails.

onRemoveFailure

(errorObject) ⇒ void

Callback function called when removing the picture fails.

Children components

Alert

Displays the relevant errors or success messages.

---

ProfilePicChangeSelectButton Required

Instance of Button

A button that lets the user select the picture they want to use from their device.

Props

name

string?

The title displayed inside the button

---

ProfilePicChangeRemoveButton

Instance of Button

A button that removes the user's profile picture.

Props

name

string?

The title displayed inside the button

---

ProfilePicChangeButton Required

Instance of Button

A button that submits the picture to set it as a profile picture.

Props

name

string?

The title displayed inside the button

---

ProfilePicChangeZoom

A range input that lets the user adjust the zoom level of the picture.

---

ProfilePicChangeCropper Required

lets the user adjust the picture by cropping it or by adjusting the zoom level. this component is a wrapper around react-easy-crop.

Props

see react-easy-crop docs

---