@pelcro/react-pelcro-js NPM

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>
    </>
  );
}

License

12 months ago

11 months ago

10 months ago

12 months ago

7 months ago

9 months ago

7 months ago

9 months ago

9 months ago

6 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

10 months ago

11 months ago

9 months ago

9 months ago

7 months ago

10 months ago

9 months ago

11 months ago

10 months ago

12 months ago

12 months ago