React-woocommerce NPM

react-woocommerce

Install

npm install --save react-woocommerce

Wrap your App with the AuthProvider in App.js

import React from 'react'
import { CartProvider } from 'react-woocommerce'
const App = () => {
  return <CartProvider>{/* ... */}</CartProvider>
}

Usage

import React from 'react'
import { useCart } from 'react-woocommerce'

const Cart = ({}) => {
  const {
    loading,
    items,
    removeItems,
    updateQuantity,
    addItem,
    remaining
  } = useCart()

  if (loading) return <div>loading...</div>

  return (
    <div>
      <button onClick={() => addItem({ productId: 9 }, 1)}>
        Add Red box (productId = 9)
      </button>
      <button onClick={() => addItem({ productId: 13 }, 1)}>
        Add Yellow box (productId = 13)
      </button>
      <button onClick={() => addItem({ productId: 10 }, 1)}>
        Add Green box (productId = 10)
      </button>
      <div>
        {items.map((item, index) => {
          const { name, price, image } = item.sku
          return (
            <div>
              <div>
                <h1>{name}</h1>
                <h4>Purchase a box</h4>
                <img alt='box' src={image.sourceUrl} width='140' height='160' />
              </div>
              <div>
                <button
                  disabled={item.quantity === 1}
                  onClick={() => updateQuantity(item, item.quantity - 1)}
                >
                  -
                </button>
                <input
                  type='number'
                  min={1}
                  max={10}
                  value={item.quantity}
                  readOnly
                />
                <button
                  disabled={!remaining(item)}
                  onClick={() => updateQuantity(item, item.quantity + 1)}
                >
                  +
                </button>
              </div>
              <button onClick={() => removeItems(item)}>Remove item</button>
              <button>{loading ? `Loading...` : `Buy for ${price}`}</button>
            </div>
          )
        })}
      </div>
    </div>
  )
}