Skip to main content
Version: Next

PelcroModalController

A composition component that controls the modals appearance and initializes core services.

Usage#

import React from "react";
import {
PelcroModalController,
Dashboard,
DashboardOpenButton,
SelectModal,
LoginModal,
RegisterModal,
PaymentMethodUpdateModal,
PaymentMethodSelectModal,
SubscriptionCreateModal,
SubscriptionRenewModal,
NewsLetter,
PaymentSuccessModal,
MeterModal,
UserUpdateModal,
AddressCreateModal,
AddressUpdateModal,
PasswordResetModal,
PasswordForgotModal,
PasswordlessRequestModal,
CartModal,
ShopView,
OrderConfirmModal,
OrderCreateModal,
GiftCreateModal,
GiftRedeemModal,
PasswordChangeModal,
AddressSelectModal,
ProfilePicChangeModal,
Notification,
QrCodeModal,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const Main = () => {
return (
<PelcroModalController>
<MeterModal />
<LoginModal />
<RegisterModal />
<UserUpdateModal />
<Dashboard />
<DashboardOpenButton />
<ProfilePicChangeModal />
<PasswordForgotModal />
<PasswordlessRequestModal />
<PasswordChangeModal />
<PasswordResetModal />
<PaymentMethodUpdateModal />
<PaymentMethodSelectModal />
<SelectModal />
<NewsLetter />
<AddressCreateModal />
<AddressSelectModal />
<AddressUpdateModal />
<SubscriptionCreateModal />
<SubscriptionRenewModal />
<PaymentSuccessModal />
<GiftCreateModal />
<GiftRedeemModal />
<ShopView />
<CartModal />
<OrderCreateModal />
<OrderConfirmModal />
<Notification />
<QrCodeModal />
</PelcroModalController>
);
};

Reference#

Props#

options#

Setup config for Pelcro core features initialization.

{
loadPaymentSDKs?: boolean,
enableURLTriggers?: boolean,
enableTheme?: boolean,
enablePaywalls?: boolean,
enableGoogleAnalytics?: boolean
}
  • loadPaymentSDKs Enables loading 3rd party scripts for the supported payment vendors.
  • enableURLTriggers Enables Pelcro URL triggers.
  • enableTheme Enables the color theme configured on your Pelcro's site design settings.
  • enablePaywalls Enables the paywall feature.
  • enableGoogleAnalytics Enables Google Analytics on all tracked actions. (needs react-ga installed as a dependency)

Default values#

OptionDefault
loadPaymentSDKstrue
enableURLTriggerstrue
enableThemetrue
enablePaywallstrue
enableGoogleAnalyticsfalse