https://github.com/mbrn/react-basket
A shopping basket components library for React based on material-ui components.
https://github.com/mbrn/react-basket
cart material-ui react shopping-basket shopping-cart
Last synced: 3 months ago
JSON representation
A shopping basket components library for React based on material-ui components.
- Host: GitHub
- URL: https://github.com/mbrn/react-basket
- Owner: mbrn
- License: mit
- Created: 2019-03-15T17:46:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T15:56:46.000Z (over 2 years ago)
- Last Synced: 2025-02-27T22:30:45.893Z (3 months ago)
- Topics: cart, material-ui, react, shopping-basket, shopping-cart
- Language: TypeScript
- Homepage: https://mbrn.github.io/react-basket/
- Size: 3.95 MB
- Stars: 29
- Watchers: 3
- Forks: 10
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-basket
[](https://travis-ci.org/mbrn/react-basket)
[](https://www.npmjs.com/package/react-basket)
[](https://npmcharts.com/compare/react-basket?minimal=true)
[](https://packagephobia.now.sh/result?p=react-basket)
[](https://twitter.com/baranmehmet) [](https://gitter.im/mbrn-react-basket/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
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__](https://mbrn.github.io/react-basket/).
If 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) :)
## Installation
npm install react-basket
## Usage
### 1. Implement a DataProvider
```javascript
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 => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(this.items)
}, 1000)
});
}
onAllItemsDeleted(): Promise {
return new Promise((resolve, reject) => {
setTimeout(() => {
this.items = [];
resolve(this.items)
}, 1000)
});
}
onItemAdded(id: string): Promise {
return new Promise((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 => {
return new Promise((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.
```javascript
class App extends React.Component {
render() {
const { classes } = this.props;
return (
your all components will be here
>BasketProvider>
);
}
}
```
### 3. Use Basket component
It connects to BasketProvider and take data from it.
```javascript
import { Basket } from 'react-basket';
```
### 4. Connect to basket data anywhere
```javascript
import { withBasketData } from 'react-basket';
import { IconButton, Badge } from '@material-ui/core';
import ShoppingCart from '@material-ui/icons/ShoppingCart';
const MyComponent = (props) => (
)
export default withBasketData(MyComponent);
```
## Licence
This project is licensed under the terms of the [MIT license](/LICENSE).