How do I show reviews with React?
Updated · Integrations
@pepreviewpro/react has a component for each widget in the gallery, plus the review form. It reads only public data, so it takes no key.
Set your store once
Wrap your app in <PepReviewProProvider store="your-store-slug">. Every widget inside it shows your store's reviews. The provider also records where each shopper first came from. Get credit for buyers PepReviewPro sends you
Add a widget
Each widget in the gallery has a component:
- Carousel:
<Carousel> - Review Wall:
<Grid> - Trust Badge:
<Badge> - Floating Badge:
<FloatingBadge> - Product Stars:
<MiniStars> - Sidebar Panel:
<Sidebar> - Review Ticker:
<Ticker> - Trust Seal:
<TrustSeal>
They look like the widgets on WordPress, because the same runtime draws them.
Pass productRef with your own product id to show one product's reviews. theme, limit, cols, and minRating work as they do in the shortcodes.
Each widget marks your reviews as seen when it is on screen, so orders from buyers who read them count in Insights.
Put the reviews in your HTML
A widget fetches its reviews in the browser unless you pass data. Fetch it on the server with prp.reviews.list() from @pepreviewpro/server and pass it in. The reviews are then in your page's HTML, for search engines and for readers without JavaScript. This reads the same public data the widgets show, so it never counts against your key.
<ReviewsJsonLd> prints Product markup with your rating and reviews from that same data, so the markup matches what the page shows. See how you show up on Google
The review form
<ReviewForm> is a plain React form with no styles of its own, so it takes your site's design. It sends a review with your own product and order ids. The review waits until its author confirms it by email, like every review. What happens after a buyer writes a review?
Your own design
The hooks useReviews, useAggregate, useStoreProfile, and useSubmitReview hand you the data. <Stars>, <ReviewList>, and <VerifiedBadge> are unstyled parts to build with.
Was this helpful?