react-shop-cart v1.0.5

react-shop-cart

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

This package provides several components:

• Cart
• CartReducers
• AddCartButton

Meta

• author: Christian Ballester <ballester_christian@yahoo.com>
• license: MIT
• based on Dennis Paler react-cart-component

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

AddCartButton

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