react-shopify-hooks

Collection of React hooks for interacting with the Shopify API.

Status

Planning. Work on implemtation.

Install

npm install --save react-shopify-hooks

API

ShopifyProvider

<ShopifyProvider
  shopName="your-shop-name"
  storefrontAccessToken="your-access-token"
>
  {children}
</ShopifyProvider>

Context provider for all Shopify hooks. Must be used at the root of your app.

useShopifyProduct

const { product, error } = useShopifyProduct(productId)

• product All product data for the provided product ID

• error Error message if fetching product data failed

useShopifyProductVariant

const { productVariant, error } = useShopifyProductVariant(productId, productVariantId)

Fetches product variant data. Note that the parent product's ID is necessary.

Return Values

• productVariant All product variant data for the provided product variant ID

• error Error message if fetching product variant data failed

useShopifyCustomerAccessToken

const { create, renew, delete } = useShopifyCustomerAccessToken()

Manages customer access token creation, renewal, and deletion.

Return Values

Object with the following properties.

• create(email, password) Create a new customer access token. Returns the token.

• renew(customerAccessToken) Renew the customer access token. Returns the renewed token.

• delete(customerAccessToken) Permanently delete the customer access token.

useShopifyCheckout

const { checkout, actions, error } = useShopifyCheckout(checkoutId?)

Fetches a checkout using the provided checkout ID and provides actions for that checkout.

If no checkout ID is provided, all actions except createCheckout will fail.

Example

const ApplyDiscountButton = ({ discountCode }) => {
  const {
    actions: { discountCodeApply },
  } = useShopifyCheckout(myCheckoutId)

  return (
    <button onClick={() => discountCodeApply(discountCode)}>
      Instant savings!
    </button>
  )
}

Return Values

Object with the following properties.

• checkout All checkout data. Data updates on successful actions.

• actions Collection of functions related to the product variant

  • createCheckout() Create a new checkout. Returns the checkout ID.

  • attributesUpdate(attributes) Update the checkout attributes.

  • customerAssociate(customerAccessToken) Associate the checkout to a customer.

  • customerDisassociate() Disssociate the checkout from any customer.

  • discountCodeApply(code) Apply a discount code to the checkout.

  • discountCodeRemove() Remove any discount code from the checkout.

  • emailUpdate(email) Update the checkout's email address.

  • giftCardsAppend(codes) Append gift card codes to the checkout.

  • giftCardRemove(code) Remove the gift card code from the checkout.

  • lineItemsReplace(lineItems) Replace the checkout line items.

  • shippingAddressUpdate(address) Update the checkout's shipping address.

  • shippingLineUpdate(handle) Update the checkout's shipping line.

• error Error message if fetching checkout data failed.

useShopifyCustomer

const { customer, actions, error } = useShopifyCustomer(customerAccessToken?)

Fetches a customer using the provided customer access token and provides actions for that customer.

If no customer access token is provided, all actions except createCustomer, activateCustomer, recoverCustomer, resetCustomer, and resetCustomerByUrl will fail.

Return Values

• customer All customer data for the provided customer access token.

• actions Collection of functions related to the customer.

  • createCustomer(email, password) Create a new customer.

  • activateCustomer(customerId, activationToken, password) Activate a customer using the provided customer Id, activation token, and password.

  • recoverCustomer(email) Send a reset password email to the customer.

  • resetCustomer(resetToken, password) Reset a customer's password with the provided reset token and password.

  • resetCustomerByUrl(resetUrl, password) Reset a customer's password with the provided reset URL and password.

  • addressCreate(address) Add an address to the customer.

  • addressDelete(addressId) Delete a customer's address using the address ID.

  • addressUpdate(id, address) Update a customer's address using the address ID.

  • addressDefaultAddressUpdate(addressId) Set a default address for the customer.

  • updateCustomer(attributes) Update a customer's attributes.

• error Error message if fetching customer data failed