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,

SubscriptionManageMembersModal,

SubscriptionRenewModal,

SubscriptionSuspendModal,

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 />

<SubscriptionManageMembersModal />

<SubscriptionRenewModal />

<SubscriptionSuspendModal />

<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

Option	Default
loadPaymentSDKs	true
enableURLTriggers	true
enableTheme	true
enablePaywalls	true
enableGoogleAnalytics	false