# salla-review-factors-tags (https://docs.salla.dev/twilight/react/web-components/salla-review-factors-tags)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-reviews">
  [`<salla-reviews>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews) renders this component for you. You rarely use it directly.
</Callout>

Shows the per-factor ratings of a product review as small pill tags, each with the factor name, a
star icon and the rating number (for example "Quality ★ 5"). Use it next to a review on the
customer's order or review pages. Pass the factors directly with `factors`, or give an `order-id`
and let it read them from the order (the order response is cached for 5 minutes). Renders nothing
when there are no factors.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-review-factors-tags>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaReviewFactorsTags } from '@salla.sa/twilight-components-react/review-factors-tags';
```

## Example [#example]

```tsx
import { SallaReviewFactorsTags } from '@salla.sa/twilight-components-react/review-factors-tags';

export function Example() {
  return (
    <SallaReviewFactorsTags orderId={123456} productId={987654} />
  );
}
```

```html
<salla-review-factors-tags order-id="123456" product-id="987654"></salla-review-factors-tags>
```

```tsx
import { useEffect } from 'react';
import { SallaReviewFactorsTags } from '@salla.sa/twilight-components-react/review-factors-tags';

export function Example() {
  useEffect(() => {
    document.getElementById('tags').factors = [
      { name: 'Quality', rating: 5 },
      { name: 'Delivery', rating: 4 },
    ];
  }, []);

  return (
    <SallaReviewFactorsTags id="tags" />
  );
}
```

```html
<salla-review-factors-tags id="tags"></salla-review-factors-tags>
<script>
  document.getElementById('tags').factors = [
    { name: 'Quality', rating: 5 },
    { name: 'Delivery', rating: 4 },
  ];
</script>
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                      | Type             | Default |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
| `factors`   | `factors`    | Preloaded review factors, as an array of `{ name, rating?, id? }`, where `rating` is a number from 1 to 5. When it is not empty, no order is fetched. Set it as a JavaScript property.                           | `ReviewFactor[]` |         |
| `itemId`    | `item-id`    | Order item ID used to match the rated line item. Used with `order-id`.                                                                                                                                           | `number`         |         |
| `orderId`   | `order-id`   | Order ID used to fetch rating factors from `GET /orders/{order_id}`. Use it together with `rating-id`, `product-id` or `item-id` to say which rated product of the order to show. Ignored when `factors` is set. | `number`         |         |
| `productId` | `product-id` | Product ID used to match the rated line item. Used with `order-id`.                                                                                                                                              | `number`         |         |
| `ratingId`  | `rating-id`  | Product rating feedback ID. Used with `order-id` to find the rated product in the order.                                                                                                                         | `number`         |         |

## Related [#related]

Used inside: [`<salla-review-order-item>`](https://docs.salla.dev/twilight/react/web-components/salla-review-order-item), [`<salla-reviews-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-summary).