1.0.13 • Published 2 years ago
srn-cart-prototype v1.0.13
Cart Component Module
A prototype for a cart component module.
Installation
Install srn-cart-prototype with npm
npm install srn-cart-prototype
Screenshots
Documentation
keyProp
Property of object with unique ID for mapping
titleProp
Property of object to display text each line
rightContent
Array. Contents in the right side of each cart items.
[{type: 'button', title: '-', onclickFunc: decrementCart}]
type
dynamicText | staticText | button - Specify the type of element you want to display.
title
Displays text inside the element. If the type is dynamicText, this will display the value of the property specified here. If staticText, it displays the title field as is.
onclickFunc
Function that triggers on click.
showRemoveButton (optional)
Boolean. Show/hide default remove item button.
onRemove (optional)
Function when clicking the default remove button.
showTotal (optional)
Boolean. Show/hide the display of total
onTotalChange (optional)
Callback function when the total updates
Usage/Examples
JS
import { useState } from 'react';
import CartComponent from 'srn-cart-prototype';
function App() {
const [cart, setCart] = useState([
{id: 1, name: 'Chicken Sandwich', quantity: 1, price: 120.00},
{id: 2, name: 'Ham Sandwich', quantity: 1, price: 200.00},
{id: 3, name: 'Hotdog Sandwich', quantity: 1, price: 300.00}
]);
const increment = (item) => {
let newArr = cart.map(cart_item => {
if (cart_item.id === item.id) {
return {...cart_item, quantity: cart_item.quantity += 1};
}
return cart_item;
})
setCart(newArr);
}
const decrement = (item) => {
let newArr = cart.map(cart_item => {
if (cart_item.id === item.id) {
return {...cart_item, quantity: cart_item.quantity -= 1};
}
return cart_item;
})
setCart(newArr);
}
const update = (items) => {
setCart(items);
}
return (
<div className="App">
<CartComponent
data={cart}
keyProp="id"
titleProp="name"
rightContent={
[
{type: 'staticText', title: '$', onclickFunc: () => null},
{type: 'dynamicText', title: 'price', onclickFunc: () => null},
{type: 'button', title: '-', onclickFunc: decrement},
{type: 'dynamicText', title: 'quantity', onclickFunc: () => null},
{type: 'button', title: '+', onclickFunc: increment}
]
}
showRemoveButton={true}
onRemove={update}
/>
</div>
);
}
export default App;
TypeScript
import { useState } from 'react';
import CartComponent from 'srn-cart-prototype';
interface ICart {
id: number;
name: string;
quantity: number;
price: number;
}
function App() {
const [cart, setCart] = useState([
{id: 1, name: 'Chicken Sandwich', quantity: 1, price: 120.00},
{id: 2, name: 'Ham Sandwich', quantity: 1, price: 200.00},
{id: 3, name: 'Hotdog Sandwich', quantity: 1, price: 300.00}
]);
const increment = (item: ICart) => {
let newArr = cart.map(cart_item => {
if (cart_item.id === item.id) {
return {...cart_item, quantity: cart_item.quantity += 1};
}
return cart_item;
})
setCart(newArr);
}
const decrement = (item: ICart) => {
let newArr = cart.map(cart_item => {
if (cart_item.id === item.id) {
return {...cart_item, quantity: cart_item.quantity -= 1};
}
return cart_item;
})
setCart(newArr);
}
const update = (items: ICart[]) => {
setCart(items);
}
return (
<div className="App">
<CartComponent
data={cart}
keyProp="id"
titleProp="name"
rightContent={
[
{type: 'staticText', title: '$', onclickFunc: () => null},
{type: 'dynamicText', title: 'price', onclickFunc: () => null},
{type: 'button', title: '-', onclickFunc: decrement},
{type: 'dynamicText', title: 'quantity', onclickFunc: () => null},
{type: 'button', title: '+', onclickFunc: increment}
]
}
showRemoveButton={true}
onRemove={update}
/>
</div>
);
}
export default App;
Dev Dependencies
- React
- React-dom
- Node version: 14.17.4
Changelogs
- 1.0.13 - Applied MVVM to components
- 1.0.12
- Added showTotal & onTotalChange property
- Added total display at the bottom
- 1.0.11 - Updated interfaces and types naming
- 1.0.10 - Updated component screenshot in documentation
- 1.0.9
- Added default styling
- Added default remove button
- 1.0.8 - Updated component screenshot in documentation
- 1.0.7 - Updated usage example in documentation
- 1.0.6 - Added usage example in documentation
- 1.0.5 - Updated folder structure and custom hooks naming
- 1.0.4 - Added GIT repository link
- 1.0.3 - Added data property in documentation
- 1.0.2 - Added documentation
- 1.0.1 - Added rightContent props for adding dynamic content at the right section of cart items
- 1.0.0 - Initialized Cart Component