Hooks

useReviews

Fetch and paginate reviews for a product.

import { useReviews } from '@simplersuite/react';

function MyReviews({ productId }) {
  const {
    reviews,
    loading,
    error,
    page,
    hasMore,
    loadMore,
    sort,
    setSort,
  } = useReviews(productId, { perPage: 10, sort: 'newest' });

  if (loading && reviews.length === 0) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <select value={sort} onChange={(e) => setSort(e.target.value)}>
        <option value="newest">Newest</option>
        <option value="highest">Highest</option>
        <option value="lowest">Lowest</option>
      </select>

      {reviews.map((review) => (
        <div key={review.id}>
          <strong>{review.customerName}</strong> — {review.rating}/5
          <p>{review.body}</p>
        </div>
      ))}

      {hasMore && <button onClick={loadMore}>Load More</button>}
    </div>
  );
}

Return Value

Property	Type	Description
reviews	Review[]	Accumulated reviews
loading	boolean	Loading state
error	Error | null	Error state
page	number	Current page
hasMore	boolean	More pages available
loadMore	() => void	Load next page
sort	string	Current sort
setSort	(sort) => void	Change sort (resets reviews)

useReviewSummary

Fetch aggregate data for a product.

const { summary, loading, error } = useReviewSummary(productId);
// summary: { averageRating, reviewCount, ratingDistribution }

useSubmitReview

Submit a review programmatically.

const { submit, loading, error, success, reset } = useSubmitReview();

await submit({
  productId: '7654321098',
  customerEmail: 'jane@example.com',
  customerName: 'Jane',
  rating: 5,
  title: 'Great!',
  body: 'Loved it.',
});