react-ecommerce-hook's Introduction

`react-ecommerce-hook`

A basic shopping cart react hook, it uses localStorage to persist data

Note: This is using the new React Hooks API Proposal which is subject to change until React 16.8 final.

You'll need to install react and react-dom at ^16.8.0-alpha.0

Install

yarn add react-ecommerce-hook

Examples

Product

import React from 'react';
import { useCart } from 'react-ecommerce-hook';

export const Product = ({ id }) => {
  	const { 
  	  addToCart, 
  	  removeFromCart, 
  	  increaseQuantity, 
  	  decreaseQuantity 
  	} = useCart();
  	
  	return (
  	  <div>
  	    <h1>Awesome Product</h1>
  	    {/* if item is unique, its maximum quantity is 1 */}
  	    <button onClick={() => addToCart({ id, isUnique: true })}>
  	      Add To Cart Unique Product
  	    </button>
  	    <button onClick={() => addToCart({ id })}>
  	      Add To Cart
        </button>
        <button onClick={() => removeFromCart({ id })}>
          Remove From Cart
        </button>
        <button onClick={() => increaseQuantity({ id })}>
          Increase Quantity
        </button>
        <button onClick={() => decreaseQuantity({ id })}>
          Decrease Quantity
        </button>
  	  </div>
  	);
}

Cart

import React from 'react';
import { useCart } from 'react-ecommerce-hook';

export const Cart = () => {
  const { 
    state: {
      addedIds, 
      quantityById,
    },
  } = useCart();
  
  return (
    <div>
      {addedIds.map(id => (
        <div key={id}>
          <h1>Product #{id}</h1>
          <span>Quantity: {quantityById[id]}</span>
        </div>
      ))}
    </div>
  );
}

API

interface IEcommerceHookReturn {
    state: {
      addedIds: number[];
      quantityById: {
        [key: string]: number;
      }
    };
    addToCart: ({ id, isUnique }: { id: number; isUnique?: boolean }) => addToCartAction;
    removeFromCart: ({ id }: { id: number }) => removeFromCartAction;
    increaseQuantity: ({ id }: { id: number }) => increaseQuantityAction;
    decreaseQuantity: ({ id }: { id: number }) => decreaseQuantityAction;
}

Recommend Projects