Skip to main content
Version: Next

Introduction

Using our modals is the quickest way to integrate Pelcro into your React UI.
You can integrate our react modals in less than 5 minutes.

Modals flow

PelcroModalController#

Wrap all modals with PelcroModalController to easily orchestrate between different pelcro views.

Add a custom modal#

You can add your own modal simply by adding a unique identifier viewId.

import React from "react";
export const CustomModal = () => {
return <div>My Custom Modal</div>;
};
CustomModal.viewId = "custom-modal";

Next, wrap your new modal with PelcroModalController.

import React from "react";
import { PelcroModalController, usePelcro } from "@pelcro/react-pelcro-js";
import { CustomModal } from "../CustomModal";
export const Main = () => {
const { switchView } = usePelcro();
return (
<>
<button onClick={() => switchView("custom-modal")}>
Switch to my custom modal
</button>
<PelcroModalController>
<CustomModal />
</PelcroModalController>
</>
);
};
Use our Modal component.

You can wrap your modal content inside our Modal component.

Modal Events#

PelcroModalDisplay#

This event is triggered with the modal's name when the user displays any modal.

Usage#

document.addEventListener("PelcroModalDisplay", (e) => {
console.log(e.detail.modalName);
});

Available Modals#

Don't like modals?#

If you're more into a static in-page UI. We export the content of each modal in a separate component. So you get the content of most of our modals, without the hovering notion of an actual modal. We call those views.

Available Views#

  • LoginView
  • RegisterView
  • UserUpdateView
  • ProfilePicChangeView
  • AddressCreateView
  • AddressUpdateView
  • AddressSelectView
  • PasswordResetView
  • PasswordForgotView
  • PasswordlessRequestView
  • PasswordChangeView
  • PaymentMethodUpdateView
  • PaymentMethodSelectView
  • SubscriptionCreateView
  • SubscriptionSuspendView
  • SubscriptionRenewView
  • PaymentSuccessView
  • CartView
  • OrderCreateView
  • GiftCreateView
  • GiftRedeemView
  • MeterView