Skip to main content
Version: 1.0.0

usePelcro

usePelcro#

A react hook that exposes pelcro global store and actions.

Usage#

import React from "react";
import { usePelcro } from "@pelcro/react-pelcro-js";
export const CartExample = () => {
const { cartItems, addToCart } = usePelcro();
return (
<div>
<div>
<button onClick={() => addToCart(34)}>Add to cart +</button>
<button onClick={() => removeFromCart(34)}> Remove from cart -</button>
</div>
<div>{cartItems.reduce((total, item) => total + item.quantity, 0)}</div>
</div>
);
};
Loading...

API#

getStore#

You can use usePelcro outside react components via the getStore() API.

const { view, product, plan, set } = usePelcro.getStore();

override#

Lets you override internal implementations inside the pelcro global store.

// override switchView default implementation
usePelcro.override((set, get) => {
const currentView = get().view;
return {
switchView: (view) => {
set({ view: view });
console.log(`Switching from ${currentView} to ${view}`);
},
};
});

State#

view#

The currently open pelcro modal.

const { view } = usePelcro();

Can be set by switchView.

product#

The currently selected product, contains the product details and all the plans configured on the platform.

const { product } = usePelcro();

Can be set by setProduct.

plan#

The currently selected plan.

const { plan } = usePelcro();

Can be set by setPlan.

isGift#

When true, the proceeding subscription will be a gifted one, and the GiftCreateModal will open up to gather the donee information.

const { isGift } = usePelcro();

giftCode#

The string code of a gift, when set with a valid gift code, AddressCreateModal & AddressSelectModal redeems the subscription without going to the payment form.

const { giftCode } = usePelcro();

subscriptionIdToRenew#

Used by the SubscriptionRenewModal to renew a specific subscription. When set with a valid renewable subscription ID, user is redirected to pay for the given subscription renewal.

const { subscriptionIdToRenew } = usePelcro();

selectedAddressId#

When set with a valid address ID, it'll be preselected in the next payment for a plan/ecommerce where address is required.

const { selectedAddressId } = usePelcro();

cartItems#

The ecommerce cart array. Contains the current user's cart items. Also Persisted in local storage.

const { cartItems } = usePelcro();

Add or remove cart items with addToCart & removeFromCart

order#

The current ecommerce order items. this field is populated once the user starts the checkout flow, it can either be an array of items, which happens in the case of checking out using the cart view, or a single item object, which happens in the case of clicking the quick purchase button of an e-commerce item.

const { order } = usePelcro();

Functions#

set#

The global store setter. Takes a partial state and merges it with the current state

const { set } = usePelcro();
set({ subscriptionIdToRenew: 1234 });
const { set } = usePelcro();
set((currentState) => ({ subscriptionIdToRenew: 1234 }));

resetState#

Resets all the state without closing the current modal.

const { resetState } = usePelcro();
resetState();

switchView#

Called with a valid view ID to switch to the right modal.

const { switchView } = usePelcro();
switchView("login");
Valid view IDs#
ModalView ID
LoginModal"login"
RegisterModal"register"
Dashboard"dashboard"
UserUpdateModal"user-edit"
ProfilePicChangeModal"profile-picture"
MeterModal"meter"
NewsLetter"newsletter"
SelectModal"plan-select"
GiftCreateModal"gift-create"
GiftRedeemModal"gift-redeem"
SubscriptionCreateModal"subscription-create"
SubscriptionRenewModal"subscription-renew"
PaymentMethodUpdateModal"payment-method-update"
PaymentSuccessModal"subscription-success"
AddressCreateModal"address-create"
AddressUpdateModal"address-edit"
AddressSelectModal"address-select"
PasswordChangeModal"password-change"
PasswordForgotModal"password-forgot"
PasswordResetModal"password-reset"
OrderCreateModal"order-create"
CartModal"cart"
OrderConfirmModal"order-confirm"

resetView#

Resets the view state (closes the modal) & resets all the state.

const { resetView } = usePelcro();
resetView();

switchToPaymentView#

When called, directs to the appropriate payment modal according to the current state. Resets the view otherwise.

const { switchToPaymentView } = usePelcro();
switchToPaymentView();
Conditions#
ModalCondition
SubscriptionCreateModalWhen product is set
SubscriptionRenewModalWhen both product and subscriptionIdToRenew are set
OrderCreateModalWhen cartItems has at least one item

switchToAddressView#

When called, directs to the appropriate address modal according to the current state.

const { switchToAddressView } = usePelcro();
switchToAddressView();
Conditions#
ModalCondition
AddressSelectModalWhen the user has at least one shipping address.
AddressCreateModalWhen user doesn't have any address yet.

setProduct#

Sets the selected product state. Called with a valid product id

const { setProduct } = usePelcro();
setProduct(1234);

setPlan#

Sets the selected plan state. Called with a valid plan id

const { setPlan } = usePelcro();
setPlan(5678);

addToCart#

Adds a new item to the user's cart. If the item already exists, it adds to its quantity. Called with a valid SKU id

const { addToCart } = usePelcro();
addToCart(123);

removeFromCart#

Removes an item from the user's cart. If the item's quantity is more than 1, it decrements the quantity. Called with a valid SKU id

const { removeFromCart } = usePelcro();
removeFromCart(123);

purchaseItem#

Instantly starts the checkout flow for a single ecommerce item. Called with a valid SKU id

const { purchaseItem } = usePelcro();
purchaseItem(123);

isAuthenticated#

Returns true when user is authenticated, false otherwise.

const { isAuthenticated } = usePelcro();
const loggedIn = isAuthenticated();

logout#

Logs the current user out & switches to LoginModal, if authenticated.

const { logout } = usePelcro();
logout();

Events Callbacks#

whenSiteReady#

Takes a callback function and executes it immediately if your Pelcro site is already loaded, or when it finally loads.

const { whenSiteReady } = usePelcro();
whenSiteReady((siteObject) => {
console.log(siteObject);
});

whenUserReady#

Takes a callback function and executes it immediately if the user object is loaded, or when it finally loads.

const { whenUserReady } = usePelcro();
whenUserReady((userObject) => {
console.log(userObject);
});

whenEcommerceLoaded#

Takes a callback function and executes it immediately if the ecommerce products are loaded, or when they finally load.

const { whenEcommerceLoaded } = usePelcro();
whenEcommerceLoaded((ecommerceProductsArray) => {
console.log(ecommerceProductsArray);
});