react-easy-cart v1.1.6

Shopping cart integrator

Installation

 npm i react-easy-cart --save

Simple setup

import { CartButton, CartWrapper } from "react-easy-cart"

import React from "react";
import { CartButton, CartWrapper } from "react-easy-cart"

function App() {

  const products = [
    { id: 1, name: 'Stove', price: 6000, description: "Amazing product for cooking faster" },
    { id: 2, name: 'Cooker', price: 12000, description: "Amazing product for cooking faster" },
  ]

  const continueToCheckout = (continueToCheckoutData) => {
    console.log("continueToCheckoutData", continueToCheckoutData)
  }

  return (
    <CartWrapper cartShow={true} currencySign="$" continueToCheckout={continueToCheckout}>
      <div>
        {products.map((product, index) =>
          <React.Fragment key={index}>
            <div>
              <b>{product.name}</b>
              <p>{product.price}</p>
              <CartButton
                product={{
                  name: product.name,
                  id: product.id,
                  price: product.price,
                  description: product.description,
                  quantity: 1,
                  image: "https://drive.google.com/uc?id=18KkAVkGFvaGNqPy2DIvTqmUH_nk39o3z"
                }}
              />
            </div>
            <hr />
          </React.Fragment>
        )}
      </div>
    </CartWrapper>
  );
}

export default App;

More custom usage

Setup

import { CartWrapper, CartButton, CartListing } from "react-easy-cart"

Example

import React from "react";
import { CartWrapper, CartButton, CartListing } from "reacteasycart"

function App() {

  const containerStyles =
  {
    display: "flex",
    justifyContent: "space-between",
    marginLeft: "50px",
    marginRight: "50px",
    marginTop: "50px"
  }

  const productButtonStyles =
  {
    width: '10%',
    marginRight: "50px"
  }

  const products = [
    { id: 1, name: 'yogurt', price: 6000, description: "amazing product for cooking faster" },
    { id: 2, name: 'milk', price: 12000, description: "amazing product for cooking faster" },
  ]

  const continueToCheckout = (checkoutDetails) => {
    console.log(checkoutDetails)
  }

  return (
    <CartWrapper cartShow={false}>

    <div style={{ ...containerStyles }}>
      <div style={{ ...productButtonStyles }}>
        {products.map((product, index) =>
          <React.Fragment key={index}>
            <div>
              <b>{product.name}</b>
              <p>{product.price}</p>
              <CartButton
                product={{
                  name: product.name,
                  id: product.id,
                  price: product.price,
                  description: product.description,
                  quantity: 1
                }}
              />
            </div>
            <hr />
          </React.Fragment>
        )}
      </div>

      <CartListing continueToCheckout={continueToCheckout} currencySign="$" />
    </div>

     </CartWrapper>
  );
}

export default App;

Imports.

Customization

Example:

  <CartButton
    buttonStyle={{
      addToCart: { backgroundColor: '#00b0ff' },
      increment: { backgroundColor: 'purple' },
      decrement: { backgroundColor: 'green' }
    }}
    buttonClass={{
      addToCart: "bg__bg_Red",
      increment: "bg__bg_Red",
      decrement: "bg__bg_Red"
    }}

ii) To disable the decrement and increment buttons on the CartButton use isIncrementAndDecrementBtn prop

  <CartButton
    isIncrementAndDecrementBtn={false}

  <CartListing
      cartDetailsBtnClass={{ increment: "int_acc" 
      }}
      isCartLogo={false}

ii) Cart logo show/hide

  <CartListing
      isCartLogo={false}