Wondering what’s next for npm?Check out our public roadmap! »

    react-shop-cart

    1.0.5 • Public • Published

    react-shop-cart

    A react shopping cart components with redux with instant updates for e-commerce applications

    NPM JavaScript Style Guide

    This package provides several components:

    Meta

    Features

    • Add and remove product to the cart
    • Cart Products persist after page reloads

    Demo

    demo: https://flintstore.herokuapp.com/

    Install

    npm install --save react-shop-cart

    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-shop-cart'
    
    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: 300.0,
        image: 'https://colorlib.com/preview/theme/divisima/img/product/5.jpg'
      },
      {
        id: 3,
        name: 'Flamboyant Pink Top',
        sku: 'kskskskks',
        price: 400.0,
        image: 'https://colorlib.com/preview/theme/divisima/img/product/7.jpg'
      },
      {
        id: 4,
        name: 'Flamboyant Pink Top',
        sku: 'kskskskks',
        price: 400.0,
        image: 'https://colorlib.com/preview/theme/divisima/img/product/8.jpg'
      },
    ];
    
    class Example extends Component {
      render () {
        return (
          <Cart currency="USD" />
          <div>
          {products.map((product, key) => {
                return (
                    <div className="col" key={key}>
                      <div className="product-item">
                        <div className="pi-pic">
                           <img src={product.image} />
                           <div className="pi-links">
                              <AddCartButton
                                product={product}
                                styles={{ backgroundColor: '#009688', color: 'white', border: '0' }}
                              />
                           </div>
                        </div>
                        <div className="pi-text">
                            <p>{product.name}</p>
                            <h6>{formatter.format(product.price)}</h6>
                        </div>
                      </div>
                    </div>
                  );
          })}
          </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}. Required
    • image string Path to main image. Required.

    License

    Install

    npm i react-shop-cart

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar