@doosterling/use-shopify NPM

@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

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;