React Providers Cart

Simple React Shopping Cart and Context Provider for checkout and available for multi-vendor for typescript support.

Features

• Easy to use.
• Fundamental Shopping Cart Logic
• Tax and Shipping, Additional Fee calculation
• State Management
• Local Storage Support
• Easy to access cart detail information
• Fully Tested

Installation

Install using npm

npm install @react-providers/cart

Install using yarn

yarn add @react-providers/cart

Usage

Basic Usage

import { CartProvider } from "@react-providers/cart";

function App() {
  return (
    <CartProvider storeName={storeName}>
      <AppRoutes />
    </CartProvider>
  );
}

Note product must include pKey property as a identifier.

import { useCart } from "@react-providers/cart";

function ProductPage(product) {
  const {addCart, updateCart} = useCart()

  // you can give product with quantity at a time
  const handleUpdateCart = () => {
    updateCart(product, 4)
  }

  return (
    <div>
        <button onClick={() => {addCart(product)}}>Add to Cart</button>
    </div>;
  )
}

import Cart, { useCart } from "@react-providers/cart";

function CheckoutPage(product) {

    useEffect(() => {
        // you can put this anywhere even outside component.
        Cart.on("submit", (cart) => {
            // TODO: submit order logic here
        })
    }, [])

  const {placeOrder} = useCart()

  return (
    <div>
        <button onClick={placeOrder}>Create Order</button>
    </div>;
  )
}