semantic-ui-react#Rating JavaScript Examples

The following examples show how to use semantic-ui-react#Rating. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Product.js    From React-Ecommerce-Template with MIT License 6 votes vote down vote up 
function Product({ id, title, price, rating, imageUrl }) {
  const [, dispatch] = useStateValue();

  const addTobasket = () => {
    dispatch({
      type: "ADD_TO_BASKET",
      item: {
        id,
        title,
        price,
        rating,
        imageUrl,
      },
    });
  };
  return (
    <div className="product">
      <Card className="product__card">
        <Image className="product__image" centered src={imageUrl} />
        <Card.Content>
          <Card.Header className="product__title">{title}</Card.Header>
          <Card.Meta>
            <Rating icon="star" defaultRating={rating} maxRating={5} />
          </Card.Meta>
          <Card.Description>
            <span className="product__price">${price}</span>
          </Card.Description>
        </Card.Content>
        <Card.Content extra className="product__footer">
          <Button inverted className="product__button" onClick={addTobasket}>
            ADD TO BASKET
          </Button>
        </Card.Content>
      </Card>
    </div>
  );
}
Example #2
Source File: CheckoutProduct.js    From React-Ecommerce-Template with MIT License 5 votes vote down vote up 
function CheckoutProduct({ id, title, price, rating, imageUrl }) {
  const [, dispatch] = useStateValue();
  const removeFromBasket = () => {
    dispatch({
      type:'REMOVE_FROM_BASKET',
      id
    })
  };

  return (
    <div>
      <Item className="checkoutProduct__item">
        <Item.Image
          size="tiny"
          src={imageUrl}
          className="checkoutProduct__image"
        />
        <Item.Content>
          <Item.Header className="checkoutProduct__title">{title}</Item.Header>
          <Item.Meta>
            {" "}
            <Rating icon="star" defaultRating={rating} maxRating={5} />
          </Item.Meta>
          <Item.Description>
            <span className="checkoutProduct__price">${price}</span>
          </Item.Description>
          <Item.Extra>
            <Button
              color='red'
              className="checkoutProduct__button"
              onClick={removeFromBasket} 
            >
              REMOVE
            </Button>
          </Item.Extra>
        </Item.Content>
        <Divider inverted section />
      </Item>
    </div>
  );
}