Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sammdec/use-cart
A tiny react hook for integrating an e-commerce cart into your app
https://github.com/sammdec/use-cart
cart ecommerce hooks react react-dom react-hooks
Last synced: 20 days ago
JSON representation
A tiny react hook for integrating an e-commerce cart into your app
- Host: GitHub
- URL: https://github.com/sammdec/use-cart
- Owner: sammdec
- License: mit
- Archived: true
- Created: 2019-04-08T15:59:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:19:43.000Z (almost 2 years ago)
- Last Synced: 2024-04-13T13:44:30.567Z (7 months ago)
- Topics: cart, ecommerce, hooks, react, react-dom, react-hooks
- Language: JavaScript
- Size: 1.77 MB
- Stars: 31
- Watchers: 0
- Forks: 7
- Open Issues: 20
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# `use-cart`
> A tiny react hook for creating a e-commerce cart in your app
Using e-commerce carts in React are sometimes way to bloated and come with strong opinions on styling, `use-cart` gets out your way and gives you the building blocks to build in shopping cart functionality into your react app.
## Installation
> Note: please ensure you install versions >= 16.8.0 for both react and react-dom, as this library depends on the new hooks feature
## NPM
```
npm i use-cart --save
```
## Yarn
```
yarn add use-cart
```
## Quick Start
```js
import { CartProvider, useCart } from "use-cart"
// Wrap your app to expose the store
const App = () => (
<>
>
)
// Add the hook in any child component to get access to functions
const Item = () => {
const { addItem } = useCart()
return (
My item for sale
addItem("TEST_SKU")}>Add to basket
)
}
// You can use the hook in as many components as you want and they all share the same cart state
const Cart = () => {
const { items, addItem, removeItem, removeLineItem, clearCart } = useCart()
return (
{items.map(item => (
{item.sku} - {item.quantity}{" "}
addItem(item.sku)}>Increase Quantity
removeItem(item.sku)}>
Decrease Quantity
removeLineItem(item.sku)}>
Remove from cart
))}
Clear Cart
)
}
```
## Examples
- [Basic](https://codesandbox.io/s/v1mp6z0l20?fontsize=14)
- [Fetching extra product data](https://codesandbox.io/s/zwl877zzl4?fontsize=14)
- [Initial cart](https://codesandbox.io/s/9zro3wjy0y?fontsize=14)
- [Using local storage to load initial cart](https://codesandbox.io/s/7wm873zq6j?fontsize=14)
## API
### ``
Passes the cart object to the `useCart` hook
#### Props
`initialCart (Array)`: initial state that the cart will contain on initial render, it must be an array of objects
`children (React.ReactNode)`: react component, usually containing the rest of your app
### `useStore()`
The main hook must be wrapped with the `CartProvider` component at some point in the ancestor tree
#### Returns
Object containing:
- `addItem(sku, [quantity=1]): Function` - takes a sku an optional quantity (defaults to 1) to add to the cart
- `removeItem(sku, [quantity=1]): Function` - removes an item from the cart defaults to a quantity of 1.
- `removeLineItem(sku): Function` - removes an entire line item from the cart
- `clearCart(): Function` - removes all items from the cart
- `isInCart(sku): Function` - returns `true` if sku is present in the cart otherwise `false`
- `items: Array` - array of objects containing a minimum of `sku` and `quantity` properties on each object
- `lineItemsCount: Number` - returns number of unique line items n the cart
- `totalItemsCount: Number` - returns number of all quantities of line items combined
## Detailed API from `useCart` object
### `addItem(sku, [quantity=1])`
This method adds an item to the cart identified by its sku, if you would like to add more quantity you can pass an optional quantity value.
#### Arguments
`sku (String)`: The unique item sku that identifies the item in the cart
`[quantity=1] (Number)`: The quantity added to the cart
#### Returns
`(undefined)`
---
### `removeItem(sku, [quantity=1])`
Removes a quantity from an item in the cart if this number drops to 0 the line item is removed from the cart.
#### Arguments
`sku (String)`: The unique item sku that identifies the item in the cart
`[quantity=1] (Number)`: The quantity removed from the cart
#### Returns
`(undefined)`
---
### `removeLineItem(sku)`
A convenience function that removes an entire line item from the cart. This would be the same thing as getting the quantity of a line item then calling `removeItem()` by that quantity.
#### Arguments
`sku (String)`: The unique item sku that identifies the item in the cart
#### Returns
`(undefined)`
---
### `isInCart(sku)`
Allows you to quickly check if a item with the given sku is present in the cart
#### Arguments
`sku (String)`: The unique item sku that identifies the item in the cart
#### Returns
`(boolean)`: Returns `true` if the sku exists in the cart
---
### `items`
`(array)`: An array containing objects with `sku` and `quantity` properties of each item in the cart.
---
### `lineItemsCount`
`(number)`: The number of unique skus in the cart
---
### `totalItemsCount`
`(number)`: The number of all the quantities from all the sku's in the cart
---
MIT License.
---