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"