react-cart-components
A react shopping cart components with redux with instant updates for e-commerce applications
This package provides several components:
Meta
- author: Dennis Paler <dtpaler@gmail.com>
- license: MIT
Features
- Add and remove product to the cart
- Cart Products persist after page reloads
Demo
demo: https://react-cart-components-demo.herokuapp.com/
Install
npm install --save react-cart-components
Usage
With Redux.
import React Component from 'react'import Provider from 'react-redux'import createStore combineReducers from 'redux' import CartReducers from react-cart-components' const store = createStore( combineReducers({ cart: CartReducers // Your own reducers here, })); import React, { Component } from 'react' import { Cart, AddCartButton } from 'react-cart-components' const products = [ { id: 1, name: 'Flamboyant Pink Top', sku: 'kskskskks', price: 200.0, image: 'https://colorlib.com/preview/theme/divisima/img/product/6.jpg' } id: 2 name: 'Black and White Stripes Dress' sku: 'kskskskks' price: 3000 image: 'https://colorlib.com/preview/theme/divisima/img/product/5.jpg' id: 3 name: 'Flamboyant Pink Top' sku: 'kskskskks' price: 4000 image: 'https://colorlib.com/preview/theme/divisima/img/product/7.jpg' id: 4 name: 'Flamboyant Pink Top' sku: 'kskskskks' price: 4000 image: 'https://colorlib.com/preview/theme/divisima/img/product/8.jpg' ; { return <Cart ="USD" /> <div> products </div> }
Props
Cart Component
Name | Type | Default | Description |
---|---|---|---|
currencySymbol | string | USD |
Currency symbol to be used |
checkoutTextLabel | string | Checkout |
A checkout button text on the cart |
cartTextLabel | string | Your Cart |
A cart header title |
subTotalTextLabel | string | Sub Total |
Cart - Sub Total Text |
quantityTextLabel | string | Quantity |
Cart - Product Qty Text |
handleCheckout | Function | null | handleCheckout will be triggered when checkoutLabel button is clicked and return cart products object. |
AddCartButton
Name | Type | Default | Description |
---|---|---|---|
product | Object | null | (Required) Product object to be added to the cart |
styles | Array[Object] | Object | [{}] |
The style used for button |
addLabel | string | Add to Cart |
A add cart button text |
Type: Object
Properties
id
string Product's id. Required.name
string Product Name to display pattern. Required.price
Price {currency: value}. Requiredimage
string Path to main image. Required.
License
MIT © Dennis Paler