Miss any of our Open RFC calls?Watch the recordings here! »

react-redux-shopping-cart

1.0.2 • Public • Published

react-redux-shopping-cart

Shopping cart components for React-Redux applications.

This package aims to provide fundemental and easily extendable components instead of complexity and hardly rememberable strict rules.

Installation

npm install react-redux-shopping-cart

Or

yarn add react-redux-shopping-cart

Usage

1. Addding the reducer to redux store
  import { createStore } from 'redux';
  import { cartReducer } from 'react-redux-shopping-cart';
 
  const rootReducer = () =>
    combineReducers({
      //other reducers
      cart: cartReducer,
    });
 
  const store = createStore(
    rootReducer(),
    //middleware and enchancer composition
    ,
  );

2. Built-in components

Component Parameters Description
AddToCart item(Object), styles(String), disabled(Boolean), text(String) Adds the given item to shopping cart
RemoveFromCart item(Object), styles(String), disabled(Boolean), text(String) Removes the given item from shopping cart
IncreaseQty itemId(String), styles(String), disabled(Boolean), text(String) Increases the selected item's quantity
DecreaseQty itemId(String), styles(String), disabled(Boolean), text(String) Decreases the selected item's quantity
ClearCart styles(String), disabled(Boolean), text(String) Clears the cart

3. Styling

a. Styled Components

All built-in components are extends styled-compoenent, so its possible to pass style string as a prop

For example

const styles =`
  background-color: 'transparent';
  min-width: '100px';
  border:1px solid;
`;
 
//...
 
<AddToCart styles={styles} item={item}/>
 
//...
b. Global Css
Component Class name(s)
AddToCart .rrshoppingcart--button-add
RemoveFromCart .rrshoppingcart--button-remove
IncreaseQty .rrshoppingcart--button-qty, .rrshoppingcart--button-inc
DecreaseQty .rrshoppingcart--button-qty, .rrshoppingcart--button-dec
ClearCart .rrshoppingcart--button-clear

Programmatic API

A programmatic API can be exposed by retrieving a service and passing in the redux store.

 
import { createCart } from 'react-redux-shopping-cart';
 
const cart = createCart(store);
 
const item = {
  id: 'foo',
  price: 1,
  qty: 1
};
 
cart.setCart({items: [item]});
 

Issues

If you find a bug, please file an issue on issue tracker on GitHub.

Contribution

All kind of contributions would be greatly appreciated. The topics are need to be covered;

  1. Tests
  2. Flow integration
  3. Example

Install

npm i react-redux-shopping-cart

DownloadsWeekly Downloads

13

Version

1.0.2

License

MIT

Last publish

Collaborators

  • avatar