riz-shoppingcart-v4

Shopping Cart With TS and Redux

A prototype of shopping cart using typescript and redux

Installation

npm i riz-shoppingcart-v4

Screenshots

Documentation

items = array of products to display

cartMode: show added items in your cart section with remove item button

storeName: show custom store name

Props

items = array

cartMode = boolean

storeName = string

Items Data Model

name : string

price : number

id : number

quantity : number

img : any

Usage/Examples

import logo from "./logo.svg";
import "./App.css";
import CartComponent from "riz-shoppingcart-v4";

function App() {
  const [products, setCart] = useState([
    { id: 1, name: "name", price: 1.0, quantity: 0, imgUrl: "sample.png" },
    { id: 2, name: "name", price: 21.0, quantity: 0, imgUrl: "sample.png" },
    { id: 3, name: "name", price: 20.0, quantity: 0, imgUrl: "sample.png" },
    { id: 4, name: "name", price: 10.0, quantity: 0, imgUrl: "sample.png" },
  ]);

  //sample function to remove product from store, and return new array
  const remove = (id) => {
    let newArr = products.filter((products) => products.id !== id);
    setCart(newArr);
    console.log("asd", newArr);
  };

  return (
    <div className="App">
      <CartComponent
        items={[products]} //products
        customBtnText="Remove Product" //custom button text
        customBtnShow={true} // show custom button
        customBtnFunc={remove} //pass remove function data out new array from mini app
      />
    </div>
  );
}

export default App;