Pelcro React Elements

Tailor your Pelcro experience to the needs of your clients using our React components.

View Documentation View Github

Features

  • Integrates with our JS SDK out-of-the-box
  • Supports different levels of customization, need modal-level control? use Modals, want fine-grained control? use Containers
  • Provides usePelcro hook which provides a global store for all Pelcro related data and actions
  • Consistent UX across different browsers
  • Easy styling customization using className prop and regular CSS
  • First-class Localization support using react-i18next

Documentation

For a complete reference with live examples, check the
React Pelcro elements docs

Installation

To use Pelcro components, all you need to do is install the @pelcro/react-pelcro-js package

  yarn add @pelcro/react-pelcro-js

  or

  npm install @pelcro/react-pelcro-js

Minimal example

import React from "react";
import {
  usePelcro,
  PelcroModalController,
  Dashboard,
  DashboardOpenButton,
  SelectModal,
  LoginModal,
  RegisterModal,
  PaymentMethodUpdateModal,
  PaymentMethodSelectModal,
  SubscriptionCreateModal,
  SubscriptionRenewModal,
  NewsLetter,
  PaymentSuccessModal,
  MeterModal,
  UserUpdateModal,
  AddressCreateModal,
  AddressUpdateModal,
  PasswordResetModal,
  PasswordForgotModal,
  CartModal,
  ShopView,
  OrderConfirmModal,
  OrderCreateModal,
  GiftCreateModal,
  GiftRedeemModal,
  PasswordChangeModal,
  AddressSelectModal,
  ProfilePicChangeModal,
  Notification
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";

export default function Main() {
  const { switchView } = usePelcro();

  return (
    <>
      <button onClick={() => switchView("login")}>Login</button>
      <button onClick={() => switchView("dashboard")}>My dashboard</button>
      <button onClick={() => switchView("plan-select")}>Subscribe</button>

      <PelcroModalController>
        <MeterModal />
        <LoginModal />
        <RegisterModal />
        <UserUpdateModal />
        <Dashboard />
        <DashboardOpenButton />
        <ProfilePicChangeModal />
        <PasswordForgotModal />
        <PasswordChangeModal />
        <PasswordResetModal />
        <PaymentMethodUpdateModal />
        <PaymentMethodSelectModal />
        <SelectModal />
        <NewsLetter />
        <AddressCreateModal />
        <AddressSelectModal />
        <AddressUpdateModal />
        <SubscriptionCreateModal />
        <SubscriptionRenewModal />
        <PaymentSuccessModal />
        <GiftCreateModal />
        <GiftRedeemModal />
        <ShopView />
        <CartModal />
        <OrderCreateModal />
        <OrderConfirmModal />
        <Notification />
      </PelcroModalController>
    </>
  );
}