Skip to main content
Version: Next

AddressUpdateContainer

Handles updating an existing address for the user.

Usage#

import React, { useEffect } from "react";
import {
usePelcro,
AddressUpdateContainer,
AddressUpdateFirstName,
AddressUpdateLastName,
AddressUpdateLine1,
AddressUpdateCountrySelect,
AddressUpdateStateSelect,
AddressUpdatePostalCode,
AddressUpdateCity,
AddressUpdateSetDefault,
AddressUpdateSubmit,
Alert,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomAddressUpdateView = () => {
const { set } = usePelcro();
useEffect(() => {
set({ addressIdToEdit: 1234 });
}, []);
return (
<AddressUpdateContainer
onSuccess={(userObject) => {
console.log(userObject);
}}
onFailure={(err) => {
console.error(err.message);
}}
>
<Alert />
<div>
<AddressUpdateFirstName label="First Name" />
<AddressUpdateLastName label="Last Name" />
</div>
<div>
<AddressUpdateLine1 label="Address line" />
</div>
<div>
<AddressUpdatePostalCode label="Postal/Zip code" />
<AddressUpdateCity label="City" />
</div>
<div>
<AddressUpdateCountrySelect label="Country" />
<AddressUpdateStateSelect label="State" />
</div>
<div>
<AddressUpdateSetDefault label="Set as default" />
</div>
<AddressUpdateSubmit />
</AddressUpdateContainer>
);
};

Reference#

AddressUpdateContainer#

Props#

onSuccess#

(userObject) โ‡’ void

Callback function called when the address is updated succesfully.

onFailure#

(errorObject) โ‡’ void

Callback function called when the address update fails.

type#

"shipping"|"billing"

Address type, default is "shipping".

Children components#

Alert#

Displays the relevant errors or success messages.


AddressUpdateFirstName Required#

Instance of Input

Input field component to receive the first name.


AddressUpdateLastName Required#

Instance of Input

Input field component to receive the last name.


AddressUpdateLine1 Required#

Instance of Input

Input field component to receive the address line.


AddressUpdateCountrySelect Required#

Instance of Select

Select input to choose the country.


AddressUpdateStateSelect Required#

Instance of Select

Select input to choose the state.


AddressUpdatePostalCode Required#

Instance of Input

Input field component to receive the postal/zip code.


AddressUpdateCity Required#

Instance of Input

Input field component to receive the city.


AddressUpdateSetDefault#

Instance of Checkbox

Check box to toggle if you want to set/unset this address as the default.


AddressUpdateSubmit Required#

Instance of Button

A button component that submits the address creation form.

Props#

name#

string?

The title displayed inside the button