Hydrogen Integration

Setup

Install the package in your Hydrogen project:

npm install @simplersuite/react

Add the Provider

In your root layout or product route layout:

// app/routes/products.$handle.tsx
import {
  SimplerSuiteReviewsProvider,
  ReviewSummary,
  ReviewList,
  ReviewForm,
} from '@simplersuite/react';
import { useLoaderData } from '@remix-run/react';

export async function loader({ params, context }) {
  const product = await context.storefront.query(PRODUCT_QUERY, {
    variables: { handle: params.handle },
  });

  return {
    product,
    swiftReviewsApiKey: context.env.SWIFTREVIEWS_API_KEY,
    shopDomain: context.env.PUBLIC_STORE_DOMAIN,
  };
}

export default function ProductPage() {
  const { product, swiftReviewsApiKey, shopDomain } = useLoaderData();

  return (
    <SimplerSuiteReviewsProvider apiKey={swiftReviewsApiKey} shopDomain={shopDomain}>
      <div className="product-page">
        <h1>{product.title}</h1>

        {/* Star rating summary near the title */}
        <ReviewSummary productId={product.id} />

        {/* ... product images, description, add to cart ... */}

        {/* Review section */}
        <section id="reviews">
          <h2>Customer Reviews</h2>
          <ReviewList productId={product.id} perPage={10} />
          <ReviewForm productId={product.id} />
        </section>
      </div>
    </SimplerSuiteReviewsProvider>
  );
}

Environment Variables

Add to your .env:

SWIFTREVIEWS_API_KEY=sr_your_api_key

And expose it in your Hydrogen server config.

Custom Styling

Since components are unstyled, add your own CSS:

[data-sr-summary] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

[data-sr-review] {
  padding: 16px;
  border-bottom: 1px solid #eee;
}