@doosterling/use-shopify

React hooks for the shopify buy sdk

WARNING: This project is still very much in the alpha stage, breaking changes may occur

• Description
• Installation
• Example
• Usage
• API
• License

Description

This library is a wrapper around shopify's js-buy-sdk. The core functionality is having a reactive checkout. The checkout/cart information will automatically update when modifying your cart and its state can easily be shared throughout your application by the use of react's context api.

Installation

npm install --save @doosterling/use-shopify

Example

A simple example can be found in the ./example folder, there is also a more extensive demo and the repo can be found here

Usage

Provider

import React from "react";
import { ShopifyProvider } from "@doosterling/use-shopify";
import shopify from "shopify-buy";
import CheckOut from "./CheckOut";

const client = shopify.buildClient({
  domain: `graphql.myshopify.com`,
  storefrontAccessToken: "dd4d4dc146542ba7763305d71d1b3d38",
  apiVersion: "2020-04",
});

const App = () => {
  return (
    <ShopifyProvider client={client}>
      <CheckOut />
    </ShopifyProvider>
  );
};
export default App;

Hook

import React from "react";
import { useShopify } from "@doosterling/use-shopify";

const CheckOut = () => {
  const { checkout } = useShopify();
  return <pre>{JSON.stringify(checkout, null, 3)}</pre>;
};

export default CheckOut;

API

• addItem
• removeItem
• resetCart
• updateItem
• checkout
• getAvailableForSale
• client

addItem({variantId, quantity})

Adds a certain quantity of a single item to the checkout

removeItem(variantId)

Removes all entries of a single item from the checkout

resetCart()

Removes everything from the checkout

updateItem(id, quantity)

Updates the quantity of a single item in the checkout

checkout

Returns shopify's checkout object

getAvailableForSale(shopifyId)

Returns if a certain product is availabe for sale

client

Returns the shopify client

Todo

• [ ] Improve the API
• [ ] Add tests

License

MIT © DennisOosterling

This hook is created using create-react-hook.