{"id":21332578,"url":"https://github.com/notrab/shopkit","last_synced_at":"2025-07-12T10:31:37.357Z","repository":{"id":39006844,"uuid":"139138924","full_name":"notrab/shopkit","owner":"notrab","description":"Moltin Shopkit is a minimalist component library that enables developers to easily embed commerce inside applications built with React.","archived":false,"fork":false,"pushed_at":"2023-07-05T14:15:48.000Z","size":83,"stargazers_count":2,"open_issues_count":13,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-02T02:40:00.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://developers.moltin.com/developer-tools/shopkit","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/notrab.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":"2018-06-29T10:57:59.000Z","updated_at":"2023-06-30T14:35:53.000Z","dependencies_parsed_at":"2022-09-12T20:23:29.816Z","dependency_job_id":null,"html_url":"https://github.com/notrab/shopkit","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notrab%2Fshopkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notrab%2Fshopkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notrab%2Fshopkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notrab%2Fshopkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notrab","download_url":"https://codeload.github.com/notrab/shopkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225814841,"owners_count":17528295,"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":[],"created_at":"2024-11-21T22:52:29.039Z","updated_at":"2024-11-21T22:52:29.652Z","avatar_url":"https://github.com/notrab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @moltin/react-shopkit\n\n[![CircleCI](https://circleci.com/gh/moltin/shopkit.svg?style=svg)](https://circleci.com/gh/moltin/shopkit) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![npm version](https://img.shields.io/npm/v/@moltin/react-shopkit.svg)](https://www.npmjs.com/package/@moltin/react-shopkit) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n## 🛠 Installation\n\nInstall the package from [npm](https://www.npmjs.com/package/@moltin/react-shopkit) inside your React project.\n\n```bash\nyarn add @moltin/react-shopkit\n```\n\nNext, inside your application, you need to wrap your root component with the `\u003cShopkitProvider /\u003e` and set your `clientId`. You can also set a custom `color`.\n\n```js\nimport { Shopkit as ShopkitProvider } from '@moltin/react-shopkit'\n​\nReactDOM.render(\n  \u003cShopkitProvider clientId='INSERT_CLIENT_ID'\u003e\n    \u003cApp /\u003e\n  \u003c/ShopkitProvider\u003e,\n  document.querySelector('#root')\n)\n```\n\n## Usage\n\nThe components below can be imported and configured for use inside your application.\n\n### Buy Button\n\nThe quickest way to add Moltin to your website is to use the `\u003cBuyButton /\u003e` component. Simply specify a Product ID and instantly have it added to the cart functionality.\n\n#### Props\n\n| Prop       | Default     | Required | Description                                         |\n| ---------- | ----------- | -------- | --------------------------------------------------- |\n| `id`       | `undefined` | **Yes**  | Your Moltin product ID                              |\n| `cartId`   | `undefined` | No       | A custom Cart ID (otherwise, created automatically) |\n| `children` | `undefined` | **Yes**  | A custom render function for your button            |\n\n#### Example\n\n```js\nimport React from 'react'\nimport { BuyButton } from '@moltin/react-shopkit'\n\nexport default () =\u003e (\n  \u003cBuyButton id=\"61abf56a-194e-4e13-a717-92d2f0c9d4df\"\u003e\n    {({ addToCart }) =\u003e \u003cbutton onClick={addToCart}\u003eAdd to Cart\u003c/button\u003e}\n  \u003c/BuyButton\u003e\n)\n```\n\n### Cart Button\n\nShopkit abstracts the cart functionality to the `\u003cShopkitProvider /\u003e` component that wraps your entire application. Using the React [Context API](https://reactjs.org/docs/context.html#reactcreatecontext) internally we are able to manage all cart state in one place and make it available to all other components.\n\n#### Props\n\n#### Example\n\n```js\nimport React from 'react'\nimport { CartButton } from '@moltin/react-shopkit'\n​\nexport default () =\u003e (\n  \u003cCartButton\u003e\n    {({\n      total,\n      count,\n      shown,\n      onClick,\n      items,\n      updateCartQuantity,\n      removeFromCart\n    }) =\u003e (\n      \u003cul\u003e\n        {items.map(item =\u003e (\n          \u003cli key={item.id}\u003e{item.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    )}\n  \u003c/CartButton\u003e\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotrab%2Fshopkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotrab%2Fshopkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotrab%2Fshopkit/lists"}