Skip to main content
Version: 3.14.0

Dashboard

The entry point for users' transactions and information.

Loading...
Open the dashboard from a button

The user dashboard can be opened from anywhere on your site if the user is authenticated, by adding pelcro-login-button class to any button.
Read more about Pelcro HTML buttons

Dashboard sections#

SectionDescription
My profileThere are 2 buttons in this section:
Edit profile opens UserUpdateModal
Change password opens PasswordChangeModal
Payment cardsShows the current payment method and allow updating it.
AddressesShows all of the user's addresses, each address type, the default address, and allow updating them.
SubscriptionsShows all of the user's subscriptions, and allow renewing, reactivating, canceling, adding, suspending, and redeeming subscriptions.
MembershipsShows all of the user's memberships and allow editing address tied to membership.
DonationsShows all of the user's donations.
InvoicesShows all of the user's invoices.
GiftsShows all of the user's gifted subscriptions, and allow gifting a new subscription.
OrdersShows the user's ecommerce orders list.
Saved and followedShows the user's saved items.
Learn more about how to allow users to save items

Usage#

import React from "react";
import {
Dashboard,
PelcroModalController,
usePelcro,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const DashboardExample = () => {
const { switchView } = usePelcro();
return (
<>
<button onClick={() => switchView("dashboard")}>
Click open dashboard
</button>
<PelcroModalController>
<Dashboard />
</PelcroModalController>
</>
);
};

Reference#

Props#

onDisplay#

() โ‡’ void

Callback function called when the dashboard is displayed.

onClose#

() โ‡’ void

Callback function called when the dashboard is closed.