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"