woocommerce/plugins/woocommerce-admin/client/components/rating
Kelly Dwan dec97d178e Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297)
* Importing all components from a root components file

* Update Ratings component to avoid circular dependencies, fix tests

* Export components on `wc.components`, use this for importing

* Move react-dates initialize to the components file

* Push query changes to history

Fixes an issues where native a links do not update the query in `history`

* Update test config for new @woocommerce/components path

* Update chart components import

* Merge simple/complex & alphabetize by first exported name

* Add a readme with info about how to call these components
2018-08-20 17:18:13 -04:00
..
test Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297) 2018-08-20 17:18:13 -04:00
README.md Add rating components (https://github.com/woocommerce/woocommerce-admin/pull/233) 2018-07-23 09:19:24 -04:00
index.js Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297) 2018-08-20 17:18:13 -04:00
product.js Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297) 2018-08-20 17:18:13 -04:00
review.js Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297) 2018-08-20 17:18:13 -04:00
style.scss Add rating components (https://github.com/woocommerce/woocommerce-admin/pull/233) 2018-07-23 09:19:24 -04: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).

ProductRating and ReviewRating components are also avaiable, which will pull the correct information out of product and review objects respectively. See https://woocommerce.github.io/woocommerce-rest-api-docs/.

How to use:

import { ReviewRating, ProductRating, Rating } from 'components/rating';

render: function() {
  return (
	<div>
		<div><Rating rating={ 4 } totalStars={ 5 } /></div>
		<div><Rating rating={ 2.5 } totalStars={ 6 } /></div>
		<div><ProductRating product={ {
		average_rating: 2.5,
		} } /></div>
		<div><ProductRating product={ {
		average_rating: 4,
		} } /></div>
		<div><ReviewRating review={ {
		rating: 4,
		} } /></div>
		<div><ReviewRating review={ {
		rating: 1.5,
		} } /></div>
	</div>
  );
}

ReviewRating Props

Other props will be passed down to Rating.

ProductRating Props

Other props will be passed down to Rating.

Rating Props

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