@nacelle/react-yotpo

React integration for Yotpo

Usage no npm install needed!

<script type="module">
  import nacelleReactYotpo from 'https://cdn.skypack.dev/@nacelle/react-yotpo';
</script>

README

@nacelle/react-yotpo

Adds React components for Yotpo product reviews in your Nacelle project.

Image of YotpoReviews Component

Requirements

  • A Nacelle project set up locally. See https://docs.getnacelle.com for getting started.
  • A Yotpo account and app installed on your Shopify store.

Setup

Add Module to Nacelle

Once you have Nacelle and Recharge set up you can install this module in your project from npm:

npm install @nacelle/react-yotpo -S

After the package is installed, you'll need to create a .env file in the root of the project that contains credentials for your store:

YOTPO_API_KEY=

The company ID is found in the Acccounts > Settings > API Keys section of the Klaviyo admin dashboard.

Image of Yotpo Account Settings

Usage

useYotpoRefresh

This is a React hook that will call Yotpo's refreshWidgets function when a component is mounted or updated. This ensures that the components show up-to-date information. This call is debounced so that it does not occur too often. The default debounce time is 200 milliseconds, but this can be changed by passing another value to useYotpoRefresh.

import { useYotpoRefresh } from '@nacelle/react-yotpo';

const Component = () => {
  useYotpoRefresh(400);

  return <div />;
};

YotpoReviews

Adds a div element to the dom that Yotpo will use to add product reviews.

import { YotpoReviews } from '@nacelle/react-yotpo';

<YotpoReviews
  product={shopifyProductObject}
  price={productPrice}
  urlPath={productUrlPath}
/>;

YotpoStarRating

Adds a div element to the dom that Yotpo will use to add product ratings. The component requires a productId prop, which corresponds to the pimSyncSourceProductId.

import { YotpoStarRating } from '@nacelle/react-yotpo';

<YotpoStarRating productId={pimSyncSourceProductId} />;

YotpoScripts

Provides a component that will mount <script> tags with the Yotpo JS scripts. This component should be used at the bottom of the <head> element.

import { YotpoScripts } from '@nacelle/react-yotpo';

<head>
  <!-- app code -->
  <YotpoScripts />
</head>

Example

An example integration with Nextjs can be found here.