Neanderthals Programming Machines

npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

@moltin/react-shopkit

2.0.0 • Public • Published

@moltin/react-shopkit

CircleCI semantic-release npm version code style: prettier

🛠 Installation

Install the package from npm inside your React project.

yarn add @moltin/react-shopkit

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

import { Shopkit as ShopkitProvider } from '@moltin/react-shopkit'
ReactDOM.render(
  <ShopkitProvider clientId='INSERT_CLIENT_ID'>
    <App />
  </ShopkitProvider>,
  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 <BuyButton /> 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

import React from 'react'
import { BuyButton } from '@moltin/react-shopkit'
 
export default () => (
  <BuyButton id="61abf56a-194e-4e13-a717-92d2f0c9d4df">
    {({ addToCart }) => <button onClick={addToCart}>Add to Cart</button>}
  </BuyButton>
)

Cart Button

Shopkit abstracts the cart functionality to the <ShopkitProvider /> component that wraps your entire application. Using the React Context API internally we are able to manage all cart state in one place and make it available to all other components.

Props

Example

import React from 'react'
import { CartButton } from '@moltin/react-shopkit'
export default () => (
  <CartButton>
    {({
      total,
      count,
      shown,
      onClick,
      items,
      updateCartQuantity,
      removeFromCart
    }) => (
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    )}
  </CartButton>
)

Keywords

none

install

npm i @moltin/react-shopkit

Downloadsweekly downloads

3

version

2.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability