@makaira/storefront-react

This package is a wrapper to bring a reactive shop adapter to your react storefront. This react wrapper is SSR compatible. It is completely build by the usage of react hooks.

The package will automatically handle loading data like the user, the cart or the wishlist. Also it handles modifications in the state change by listening to the events emitted by the shop adapter client.

This package gives you using hooks access to the loaded data and holds some common data like the total amount of products in the cart.

Installation

yarn install @makaira/storefront-react

or

npm i @makaira/storefront-react

Adding to your project

For simplicity we are here using the local shop adapter to demonstrate how to add the react wrapper to your storefront.

import { StorefrontShopAdapterLocal } from '@makaira/storefront-shop-adapter-local'
import { ShopProvider } from '@makaira/storefront-react'

const client = new StorefrontShopAdapterLocal()

function Index() {
  return (
    <ShopProvider client={shopClient}>
      <App />
    </ShopProvider>
  )
}

In addition if you are using typescript in your project and want to get the correct autosuggestion you have to create a new declaration file (e.g index.d.ts) with the following content:

import '@makaira/storefront-react'
import { StorefrontShopAdapterLocal } from '@makaira/storefront-shop-adapter-local'

declare module '@makaira/storefront-react' {
  interface StorefrontReactCustomClient {
    client: StorefrontShopAdapterLocal
  }
}

Props for the ShopProvider

Usage with typescript

In the above section we already explained how to set the correct shop adapter. In addition to these you can also adjust the typescript definition of the in the state stored data.

By default you don't need to do so. But if you set a custom bootstrap loader this might by helpful.

To do so add to your declaration file the following content:

import '@makaira/storefront-react'
import { StorefrontShopAdapterLocal } from '@makaira/storefront-shop-adapter-local'

declare module '@makaira/storefront-react' {
  // only overwrite one specific data
  interface StorefrontReactCustomTypes {
    cart: { id: string }
  }

  // update overwrite specific data
  interface StorefrontReactCustomTypes {
    cart: { id: string }
    user: { id: string }
  }

  // or overwrite them all
  interface StorefrontReactCustomTypes {
    cart: { id: string }
    user: { id: string }
    wishlist: { id: string }
  }
}

Available Hooks

useShopClient

This hook can be used to access the shop adapter client passed to the ShopProvider.

function App() {
  const { client } = useShopClient()

  return <></>
}

Arguments

No Arguments to pass

Returned properties

useShopCart

This hook can be used to access the current cart.

function App() {
  const { cart } = useShopCart()

  return <></>
}

Arguments

No Arguments to pass

Returned properties

useShopUser

This hook can be used to access the current user.

function App() {
  const { user } = useShopUser()

  return <></>
}

Arguments

No Arguments to pass

Returned properties

| Property | Description | Type | | -------- | ----------------- | ----- | --------- | ----------------------------------- | | user | The current user. | null | undefined | StorefrontReactCustomTypes['user'] |

useShopWishlist

This hook can be used to access the current wishlist.

function App() {
  const { wishlist } = useShopWishlist()

  return <></>
}

Arguments

No Arguments to pass

Returned properties

useShopReviews

This hook can be used to reviews for a specific product

function App() {
  const { loading, error, data, raw } = useShopWishlist({
    product: { id: 'foo' },
  })

  return <></>
}

Arguments

Returned properties