use-cart
A tiny react hook for creating a e-commerce cart in your 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
// Wrap your app to expose the storeconst App = <CartProvider> <> <Item /> <Cart /> </> </CartProvider> // Add the hook in any child component to get access to functionsconst Item = { const addItem = return <div> <p>My item for sale</p> <button onClick= >Add to basket</button> </div> } // You can use the hook in as many components as you want and they all share the same cart stateconst Cart = { const items addItem removeItem removeLineItem clearCart = return <div> items <Button onClick=clearCart>Clear Cart</Button> </div> }
Examples
- Basic
- Using local storage to load a saved cart
API
<CartProvider>
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 cartremoveItem(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 cartclearCart(): Function
- removes all items from the cartisInCart(sku): Function
- returnstrue
if sku is present in the cart otherwisefalse
items: Array
- array of objects containing a minimum ofsku
andquantity
properties on each objectlineItemsCount: Number
- returns number of unique line items n the carttotalItemsCount: Number
- returns number of all quantities of line items combined
useCart
object
Detailed API from 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