https://github.com/notrab/shopkit

Moltin Shopkit is a minimalist component library that enables developers to easily embed commerce inside applications built with React.
https://github.com/notrab/shopkit

Last synced: 7 months ago
JSON representation

Moltin Shopkit is a minimalist component library that enables developers to easily embed commerce inside applications built with React.

• Host: GitHub
• URL: https://github.com/notrab/shopkit
• Owner: notrab
• License: mit
• Created: 2018-06-29T10:57:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-05T14:15:48.000Z (almost 2 years ago)
• Last Synced: 2024-05-02T02:40:00.305Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://developers.moltin.com/developer-tools/shopkit
• Size: 81.1 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @moltin/react-shopkit

[![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)

## 🛠 Installation

Install the package from [npm](https://www.npmjs.com/package/@moltin/react-shopkit) inside your React project.

```bash

yarn add @moltin/react-shopkit

```

Next, inside your application, you need to wrap your root component with the `` and set your `clientId`. You can also set a custom `color`.

```js

import { Shopkit as ShopkitProvider } from '@moltin/react-shopkit'

​

ReactDOM.render(

  

    

  ,

  document.querySelector('#root')

)

```

## Usage

The components below can be imported and configured for use inside your application.

### Buy Button

The quickest way to add Moltin to your website is to use the `` component. Simply specify a Product ID and instantly have it added to the cart functionality.

#### Props

| Prop       | Default     | Required | Description                                         |

| ---------- | ----------- | -------- | --------------------------------------------------- |

| `id`       | `undefined` | **Yes**  | Your Moltin product ID                              |

| `cartId`   | `undefined` | No       | A custom Cart ID (otherwise, created automatically) |

| `children` | `undefined` | **Yes**  | A custom render function for your button            |

#### Example

```js

import React from 'react'

import { BuyButton } from '@moltin/react-shopkit'

export default () => (

  

    {({ addToCart }) => Add to Cart}

  

)

```

### Cart Button

Shopkit abstracts the cart functionality to the `` 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.

#### Props

#### Example

```js

import React from 'react'

import { CartButton } from '@moltin/react-shopkit'

​

export default () => (

  

    {({

      total,

      count,

      shown,

      onClick,

      items,

      updateCartQuantity,

      removeFromCart

    }) => (

      


        {items.map(item => (

          
{item.name}

        ))}

      

    )}

  

)

```