useTrustPilot

Basic Usage

There may be instances where you want to fetch the TrustPilot data, but have more control over the rendering instead of using the pre-built molecule. You can make use of the useTrustPilot hook to fetch the data and render outside of the molecules constraints.


import { useTrustPilot } from '@krakentech/coral-molecules';
 
const {
    loading,
    stars,
    trustScore,
    numberOfReviews,
    listOfReviews,
    updatedAt,
} = useTrustPilot('oegb', true);
 
return loading ? (
    <>Loading...</>
) : (
    <>
        <TrustPilotLogo width={200} />
        <TrustPilotStars stars={stars} />
        <Typography variant="caption">Updated {updatedAt}</Typography>
        <Typography variant="caption">Raw score: {trustScore}</Typography>
        <Typography variant="caption">
            Review count: {numberOfReviews}
        </Typography>
        <Typography variant="caption">
            Example Customer Review: {listOfReviews?.[0].text}
        </Typography>
    </>
);

Full API

Arguments

Name	Description	type	Default value	Required
`businessAcronym`	The buiness unit to get TrustPilot data for	`TrustPilotBusinessAcronym`	`oegb`	`true`
`withReviews`	Whether the api response should include the 20 most recent 5 star reviews	`boolean`	`false`	`false`

Return

Name	Description	type
`loading`	Are we waiting the TrustPilot API call to return data?	`boolean`
`stars`	How many star SVGs should the consumer render?	`number`
`trustScore`	What is the raw TrustPilot score?	`number`
`numberOfReviews`	Total number of reviews	`string`
`updatedAt`	An ISO formatted date string	`string`
`listOfReviews`	An array of the 20 most recent 5 star reviews	`Review[]`