{"id":13450668,"url":"https://github.com/sammdec/use-cart","last_synced_at":"2025-03-23T16:31:56.533Z","repository":{"id":41795865,"uuid":"180184358","full_name":"sammdec/use-cart","owner":"sammdec","description":"A tiny react hook for integrating an e-commerce cart into your app","archived":true,"fork":false,"pushed_at":"2023-01-03T19:19:43.000Z","size":1852,"stargazers_count":31,"open_issues_count":20,"forks_count":7,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-13T13:44:30.567Z","etag":null,"topics":["cart","ecommerce","hooks","react","react-dom","react-hooks"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/sammdec.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-04-08T15:59:15.000Z","updated_at":"2024-03-02T14:16:45.000Z","dependencies_parsed_at":"2023-02-01T09:16:38.706Z","dependency_job_id":null,"html_url":"https://github.com/sammdec/use-cart","commit_stats":null,"previous_names":["samjbmason/use-cart"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Fuse-cart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Fuse-cart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Fuse-cart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Fuse-cart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sammdec","download_url":"https://codeload.github.com/sammdec/use-cart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221856421,"owners_count":16892439,"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","ecommerce","hooks","react","react-dom","react-hooks"],"created_at":"2024-07-31T07:00:37.145Z","updated_at":"2024-10-28T16:31:43.671Z","avatar_url":"https://github.com/sammdec.png","language":"JavaScript","funding_links":[],"categories":["Packages","JavaScript"],"sub_categories":[],"readme":"# `use-cart`\n\n\u003e A tiny react hook for creating a e-commerce cart in your app\n\n\u003ca href=\"https://www.npmjs.com/package/use-cart\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/use-cart.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://travis-ci.org/samjbmason/use-cart\"\u003e\u003cimg alt=\"Build Status\" src=\"https://img.shields.io/travis/samjbmason/use-cart.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://coveralls.io/github/samjbmason/use-cart?branch=master\"\u003e\u003cimg alt=\"Coverage Status\" src=\"https://img.shields.io/coveralls/github/samjbmason/use-cart.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://github.com/samjbmason/use-cart\"\u003e\u003cimg alt=\"dependencies\" src=\"https://img.shields.io/david/samjbmason/use-cart.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://bundlephobia.com/result?p=use-cart\"\u003e\u003cimg alt=\"package size\" src=\"https://img.shields.io/bundlephobia/minzip/use-cart.svg?label=gzip%20size\u0026style=flat-square\"/\u003e\u003c/a\u003e\n\nUsing 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.\n\n## Installation\n\n\u003e Note: please ensure you install versions \u003e= 16.8.0 for both react and react-dom, as this library depends on the new hooks feature\n\n## NPM\n\n```\nnpm i use-cart --save\n```\n\n## Yarn\n\n```\nyarn add use-cart\n```\n\n## Quick Start\n\n```js\nimport { CartProvider, useCart } from \"use-cart\"\n\n// Wrap your app to expose the store\nconst App = () =\u003e (\n  \u003cCartProvider\u003e\n    \u003c\u003e\n      \u003cItem /\u003e\n      \u003cCart /\u003e\n    \u003c/\u003e\n  \u003c/CartProvider\u003e\n)\n\n// Add the hook in any child component to get access to functions\nconst Item = () =\u003e {\n  const { addItem } = useCart()\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eMy item for sale\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e addItem(\"TEST_SKU\")}\u003eAdd to basket\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n// You can use the hook in as many components as you want and they all share the same cart state\nconst Cart = () =\u003e {\n  const { items, addItem, removeItem, removeLineItem, clearCart } = useCart()\n\n  return (\n    \u003cdiv\u003e\n      {items.map(item =\u003e (\n        \u003cdiv\u003e\n          {item.sku} - {item.quantity}{\" \"}\n          \u003cButton onClick={() =\u003e addItem(item.sku)}\u003eIncrease Quantity\u003c/Button\u003e\n          \u003cButton onClick={() =\u003e removeItem(item.sku)}\u003e\n            Decrease Quantity\n          \u003c/Button\u003e\n          \u003cButton onClick={() =\u003e removeLineItem(item.sku)}\u003e\n            Remove from cart\n          \u003c/Button\u003e\n        \u003c/div\u003e\n      ))}\n      \u003cButton onClick={clearCart}\u003eClear Cart\u003c/Button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Examples\n\n- [Basic](https://codesandbox.io/s/v1mp6z0l20?fontsize=14)\n- [Fetching extra product data](https://codesandbox.io/s/zwl877zzl4?fontsize=14)\n- [Initial cart](https://codesandbox.io/s/9zro3wjy0y?fontsize=14)\n- [Using local storage to load initial cart](https://codesandbox.io/s/7wm873zq6j?fontsize=14)\n\n## API\n\n### `\u003cCartProvider\u003e`\n\nPasses the cart object to the `useCart` hook\n\n#### Props\n\n`initialCart (Array)`: initial state that the cart will contain on initial render, it must be an array of objects\n\n`children (React.ReactNode)`: react component, usually containing the rest of your app\n\n### `useStore()`\n\nThe main hook must be wrapped with the `CartProvider` component at some point in the ancestor tree\n\n#### Returns\n\nObject containing:\n\n- `addItem(sku, [quantity=1]): Function` - takes a sku an optional quantity (defaults to 1) to add to the cart\n- `removeItem(sku, [quantity=1]): Function` - removes an item from the cart defaults to a quantity of 1.\n- `removeLineItem(sku): Function` - removes an entire line item from the cart\n- `clearCart(): Function` - removes all items from the cart\n- `isInCart(sku): Function` - returns `true` if sku is present in the cart otherwise `false`\n- `items: Array` - array of objects containing a minimum of `sku` and `quantity` properties on each object\n- `lineItemsCount: Number` - returns number of unique line items n the cart\n- `totalItemsCount: Number` - returns number of all quantities of line items combined\n\n## Detailed API from `useCart` object\n\n### `addItem(sku, [quantity=1])`\n\nThis 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.\n\n#### Arguments\n\n`sku (String)`: The unique item sku that identifies the item in the cart\n\n`[quantity=1] (Number)`: The quantity added to the cart\n\n#### Returns\n\n`(undefined)`\n\n---\n\n### `removeItem(sku, [quantity=1])`\n\nRemoves a quantity from an item in the cart if this number drops to 0 the line item is removed from the cart.\n\n#### Arguments\n\n`sku (String)`: The unique item sku that identifies the item in the cart\n\n`[quantity=1] (Number)`: The quantity removed from the cart\n\n#### Returns\n\n`(undefined)`\n\n---\n\n### `removeLineItem(sku)`\n\nA 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.\n\n#### Arguments\n\n`sku (String)`: The unique item sku that identifies the item in the cart\n\n#### Returns\n\n`(undefined)`\n\n---\n\n### `isInCart(sku)`\n\nAllows you to quickly check if a item with the given sku is present in the cart\n\n#### Arguments\n\n`sku (String)`: The unique item sku that identifies the item in the cart\n\n#### Returns\n\n`(boolean)`: Returns `true` if the sku exists in the cart\n\n---\n\n### `items`\n\n`(array)`: An array containing objects with `sku` and `quantity` properties of each item in the cart.\n\n---\n\n### `lineItemsCount`\n\n`(number)`: The number of unique skus in the cart\n\n---\n\n### `totalItemsCount`\n\n`(number)`: The number of all the quantities from all the sku's in the cart\n\n---\n\nMIT License.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammdec%2Fuse-cart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsammdec%2Fuse-cart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammdec%2Fuse-cart/lists"}