Shopping Cart Mini App

Shopping Cart Mini-app.

Mini App

• Shopping Cart -

Installation

npm install @jmconcha/shopping-cart

 

ShoppingCart Props

Prop	default value	Type	Description
cartItems	[]	CartItem	List of cart items
disableIncrementButton	false	boolean	disables the button that increment the cart item quantity

 

CartItem Data Model

Prop	default value	Type	Description
id		string	Product unique id
name		string	Product name
price		number	Product price
quantity		number	Product quantity in cart
imageUrl		string	Product image link

 

Empty Cart Example

import React from 'react';
import { ShoppingCart } from '@jmconcha/shopping-cart';

function Example() {
  return <ShoppingCart />;
}

export default Example;

 

With Cart Items Example

import React from 'react';
import { ShoppingCart } from '@jmconcha/shopping-cart';

function Example() {
  const cartItems = [
    {
      id: 'id-1',
      name: 'Product 1',
      price: 100,
      quantity: 1,
      imageUrl: 'https://via.placeholder.com/150/24f355',
    },
    {
      id: 'id-2',
      name: 'Product 2',
      price: 200,
      quantity: 2,
      imageUrl: 'https://via.placeholder.com/150/24f355',
    },
    {
      id: 'id-3',
      name: 'Product 3',
      price: 300,
      quantity: 3,
      imageUrl: 'https://via.placeholder.com/150/24f355',
    },
  ];

  return <ShoppingCart cartItems={cartItems} />;
}

export default Example;

 

Disabled Increment Button Example

import React from 'react';
import { ShoppingCart } from '@jmconcha/shopping-cart';

function Example() {
  const cartItems = [
    {
      id: 'id-1',
      name: 'Product 1',
      price: 100,
      quantity: 1,
      imageUrl: 'https://via.placeholder.com/150/24f355',
    },
  ];

  return <ShoppingCart cartItems={cartItems} disableIncrementButton />;
}

export default Example;

 

Peer Dependecies

"react": "^18.2.0",
"react-dom": "^18.2.0"