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)
    });
  }
}

class App extends React.Component {
  render() {
    const { classes } = this.props;
 
    return (
      <BasketProvider dataProvider={new MyBasketDataProvider()}>
        <div> your all components will be here </div>
      </>BasketProvider>
    );
  }
}

import { Basket } from 'react-basket';
 
<Basket />

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);