Skip to content

A shopping basket components library for React based on material-ui components.

License

Notifications You must be signed in to change notification settings

mbrn/react-basket

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-basket

Build Status npm package NPM Downloads Install Size Follow on Twitter Join the chat at https://gitter.im/mbrn-react-basket/community

A shopping basket components library for React based on material-ui components.

Key features

  • Shopping Cart Component
  • Realtime shopping cart support
  • Connect to shopping cart data anywhere in app

Demo

You can access the demo page from demo site.

If you have any sort of doubt, idea or just want to talk about the project, feel free to join our chat on Gitter :)

Installation

npm install react-basket

Usage

1. Implement a DataProvider

import { DataProvider, BasketItem } from "react-basket";

export class MyBasketDataProvider implements DataProvider {
 
  registerToChanges(callback: (items: BasketItem[]) => void) {
      // You can call callback functions if you socket.io/pusher or something like it.  
  }

  products = [
    { id: "1", name: 'Computer', price: 1722.44, quantity: 1 },
    { id: "2", name: 'Phone', price: 522.14, quantity: 1 }
  ];

  items = [
    { id: "1", name: 'Computer', price: 1722.44, quantity: 1 },
    { id: "2", name: 'Phone', price: 522.14, quantity: 2 }
  ];

  getInitialData = (): Promise<BasketItem[]> => {
    return new Promise<BasketItem[]>((resolve, reject) => {
      setTimeout(() => {
        resolve(this.items)
      }, 1000)
    });
  }

  onAllItemsDeleted(): Promise<BasketItem[]> {
    return new Promise<BasketItem[]>((resolve, reject) => {
      setTimeout(() => {
        this.items = [];

        resolve(this.items)
      }, 1000)
    });
  }

  onItemAdded(id: string): Promise<BasketItem[]> {
    return new Promise<BasketItem[]>((resolve, reject) => {
      setTimeout(() => {
        let index = this.items.findIndex(item => item.id === id);
        if (index > -1) {
          this.items[index].quantity++;
        }
        else {
          const index = this.products.findIndex(item => item.id === id);
          if (index > -1) {
            const item = {...this.products[index]};
            this.items.push(item);
          }
        }

        resolve(this.items)
      }, 1000)
    });
  }

  onItemDeleted = (id: string): Promise<BasketItem[]> => {
    return new Promise<BasketItem[]>((resolve, reject) => {
      setTimeout(() => {

        const index = this.items.findIndex(item => item.id === id);
        if (index > -1) {
          this.items.splice(index, 1);
        }

        resolve(this.items)
      }, 1000)
    });
  }
}

I used Typescript, but you can use pure javascript.

2. Adding Basket Provider to app

You should add BasketProvider component in root of your application with a data provider implementation.

class App extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <BasketProvider dataProvider={new MyBasketDataProvider()}>
        <div> your all components will be here </div>
      </>BasketProvider>
    );
  }
}

3. Use Basket component

It connects to BasketProvider and take data from it.

import { Basket } from 'react-basket';

<Basket />

4. Connect to basket data anywhere

import { withBasketData } from 'react-basket';
import { IconButton, Badge } from '@material-ui/core';
import ShoppingCart from '@material-ui/icons/ShoppingCart';

const MyComponent = (props) => (
    <IconButton color="inherit">
        <Badge badgeContent={props.basketData.items.length} color="secondary">
            <ShoppingCart />
        </Badge>
    </IconButton>
) 

export default withBasketData(MyComponent);

Licence

This project is licensed under the terms of the MIT license.