rb
react-basket
npm i react-basket
rb

react-basket

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

by Mehmet Baran

0.2.1 (see all)License:MITTypeScript:Not Found
npm i react-basket
Readme

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.

Downloads/wk

4

GitHub Stars

29

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

0

OPEN PRs

16
VersionTagPublished
0.2.1
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate