woocommerce/packages/js/components/src/rating
Moon 4f484f144e
Migrate Rating component to TS (#36301)
* Convert rating to ts

* Add changelog

* Add gridicons type

* Fix style

* Change ReactElement to ReactNode

* Remove propTypes

* Remove React.VFC -- it is deprecated in React 18
2023-04-26 15:21:16 -07:00
..
stories Migrate Rating component to TS (#36301) 2023-04-26 15:21:16 -07:00
test Migrate Rating component to TS (#36301) 2023-04-26 15:21:16 -07:00
README.md Moved WCA Packages 2022-03-18 14:25:26 -07:00
index.tsx Migrate Rating component to TS (#36301) 2023-04-26 15:21:16 -07:00
product.tsx Migrate Rating component to TS (#36301) 2023-04-26 15:21:16 -07:00
review.tsx Migrate Rating component to TS (#36301) 2023-04-26 15:21:16 -07:00
style.scss Moved WCA Packages 2022-03-18 14:25:26 -07:00

README.md

Rating

Use Rating to display a set of stars, filled, empty or half-filled, that represents a rating in a scale between 0 and the prop totalStars (default 5).

Usage

<Rating rating={ 2.5 } totalStars={ 6 } />

Props

Name Type Default Description
rating Number 0 Number of stars that should be filled. You can pass a partial number of stars like 2.5
totalStars Number 5 The total number of stars the rating is out of
size Number 18 The size in pixels the stars should be rendered at
className String null Additional CSS classes

ProductRating

Display a set of stars representing the product's average rating.

Usage

// Use a real WooCommerce Product here.
const product = { average_rating: 3.5 };

<ProductRating product={ product } />

Props

Name Type Default Description
product Object null (required) A product object containing a average_rating. See https://woocommerce.github.io/woocommerce-rest-api-docs/#products

ReviewRating

Display a set of stars representing the review's rating.

Usage

// Use a real WooCommerce Review here.
const review = { rating: 5 };

<ReviewRating review={ review } />

Props

Name Type Default Description
review Object null (required) A review object containing a rating. See https://woocommerce.github.io/woocommerce-rest-api-docs/#retrieve-product-reviews