Skip to main content
Version: 3.5.2

ProfilePicChangeContainer

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