Package Exports

@jmconcha/shopping-cart
@jmconcha/shopping-cart/lib/cjs/index.js
@jmconcha/shopping-cart/lib/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jmconcha/shopping-cart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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	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;

Empty Cart 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;

With Cart Items 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;

Disabled Increment Button Example

Peer Dependecies

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