{"id":17056661,"url":"https://github.com/mbrn/react-basket","last_synced_at":"2025-08-24T12:46:47.370Z","repository":{"id":34299654,"uuid":"175866773","full_name":"mbrn/react-basket","owner":"mbrn","description":"A shopping basket components library for React based on material-ui components. ","archived":false,"fork":false,"pushed_at":"2022-12-09T15:56:46.000Z","size":4143,"stargazers_count":29,"open_issues_count":21,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T22:30:45.893Z","etag":null,"topics":["cart","material-ui","react","shopping-basket","shopping-cart"],"latest_commit_sha":null,"homepage":"https://mbrn.github.io/react-basket/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mbrn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-15T17:46:39.000Z","updated_at":"2023-09-22T10:25:10.000Z","dependencies_parsed_at":"2022-08-25T22:00:32.514Z","dependency_job_id":null,"html_url":"https://github.com/mbrn/react-basket","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Freact-basket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Freact-basket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Freact-basket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbrn%2Freact-basket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbrn","download_url":"https://codeload.github.com/mbrn/react-basket/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858016,"owners_count":20359261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cart","material-ui","react","shopping-basket","shopping-cart"],"created_at":"2024-10-14T10:25:11.771Z","updated_at":"2025-03-17T10:34:16.170Z","avatar_url":"https://github.com/mbrn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-basket\n\n[![Build Status](https://travis-ci.org/mbrn/react-basket.svg?branch=master)](https://travis-ci.org/mbrn/react-basket)\n[![npm package](https://img.shields.io/npm/v/react-basket/latest.svg)](https://www.npmjs.com/package/react-basket)\n[![NPM Downloads](https://img.shields.io/npm/dt/react-basket.svg?style=flat)](https://npmcharts.com/compare/react-basket?minimal=true)\n[![Install Size](https://packagephobia.now.sh/badge?p=react-basket)](https://packagephobia.now.sh/result?p=react-basket)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/baranmehmet.svg?label=follow+baranmehmet)](https://twitter.com/baranmehmet) [![Join the chat at https://gitter.im/mbrn-react-basket/community](https://badges.gitter.im/mbrn-react-basket/community.svg)](https://gitter.im/mbrn-react-basket/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nA shopping basket components library for React based on material-ui components. \n\n## Key features\n\n- Shopping Cart Component\n- Realtime shopping cart support\n- Connect to shopping cart data anywhere in app\n\n## Demo\n\nYou can access the demo page from [__demo site__](https://mbrn.github.io/react-basket/).\n\nIf you have any sort of doubt, idea or just want to talk about the project, feel free to join [our chat on Gitter](https://gitter.im/mbrn-react-basket/community) :)\n\n## Installation\n    npm install react-basket\n\n## Usage\n\n### 1. Implement a DataProvider\n\n```javascript\nimport { DataProvider, BasketItem } from \"react-basket\";\n\nexport class MyBasketDataProvider implements DataProvider {\n \n  registerToChanges(callback: (items: BasketItem[]) =\u003e void) {\n      // You can call callback functions if you socket.io/pusher or something like it.  \n  }\n\n  products = [\n    { id: \"1\", name: 'Computer', price: 1722.44, quantity: 1 },\n    { id: \"2\", name: 'Phone', price: 522.14, quantity: 1 }\n  ];\n\n  items = [\n    { id: \"1\", name: 'Computer', price: 1722.44, quantity: 1 },\n    { id: \"2\", name: 'Phone', price: 522.14, quantity: 2 }\n  ];\n\n  getInitialData = (): Promise\u003cBasketItem[]\u003e =\u003e {\n    return new Promise\u003cBasketItem[]\u003e((resolve, reject) =\u003e {\n      setTimeout(() =\u003e {\n        resolve(this.items)\n      }, 1000)\n    });\n  }\n\n  onAllItemsDeleted(): Promise\u003cBasketItem[]\u003e {\n    return new Promise\u003cBasketItem[]\u003e((resolve, reject) =\u003e {\n      setTimeout(() =\u003e {\n        this.items = [];\n\n        resolve(this.items)\n      }, 1000)\n    });\n  }\n\n  onItemAdded(id: string): Promise\u003cBasketItem[]\u003e {\n    return new Promise\u003cBasketItem[]\u003e((resolve, reject) =\u003e {\n      setTimeout(() =\u003e {\n        let index = this.items.findIndex(item =\u003e item.id === id);\n        if (index \u003e -1) {\n          this.items[index].quantity++;\n        }\n        else {\n          const index = this.products.findIndex(item =\u003e item.id === id);\n          if (index \u003e -1) {\n            const item = {...this.products[index]};\n            this.items.push(item);\n          }\n        }\n\n        resolve(this.items)\n      }, 1000)\n    });\n  }\n\n  onItemDeleted = (id: string): Promise\u003cBasketItem[]\u003e =\u003e {\n    return new Promise\u003cBasketItem[]\u003e((resolve, reject) =\u003e {\n      setTimeout(() =\u003e {\n\n        const index = this.items.findIndex(item =\u003e item.id === id);\n        if (index \u003e -1) {\n          this.items.splice(index, 1);\n        }\n\n        resolve(this.items)\n      }, 1000)\n    });\n  }\n}\n```\n\n\u003e I used Typescript, but you can use pure javascript.\n\n### 2. Adding Basket Provider to app\nYou should add BasketProvider component in root of your application with a data provider implementation. \n\n```javascript\nclass App extends React.Component {\n  render() {\n    const { classes } = this.props;\n\n    return (\n      \u003cBasketProvider dataProvider={new MyBasketDataProvider()}\u003e\n        \u003cdiv\u003e your all components will be here \u003c/div\u003e\n      \u003c/\u003eBasketProvider\u003e\n    );\n  }\n}\n```\n\n### 3. Use Basket component\n\nIt connects to BasketProvider and take data from it. \n\n```javascript\nimport { Basket } from 'react-basket';\n\n\u003cBasket /\u003e\n```\n\n### 4. Connect to basket data anywhere\n\n\n```javascript\nimport { withBasketData } from 'react-basket';\nimport { IconButton, Badge } from '@material-ui/core';\nimport ShoppingCart from '@material-ui/icons/ShoppingCart';\n\nconst MyComponent = (props) =\u003e (\n    \u003cIconButton color=\"inherit\"\u003e\n        \u003cBadge badgeContent={props.basketData.items.length} color=\"secondary\"\u003e\n            \u003cShoppingCart /\u003e\n        \u003c/Badge\u003e\n    \u003c/IconButton\u003e\n) \n\nexport default withBasketData(MyComponent);\n```\n\n\n## Licence\n\nThis project is licensed under the terms of the [MIT license](/LICENSE).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbrn%2Freact-basket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbrn%2Freact-basket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbrn%2Freact-basket/lists"}