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



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

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

Lists the per-factor ratings of a single review (for example "Quality" or "Delivery"), each with
mini stars and a text label. Used inside salla-comment-item when the customer opens the review
details; a theme rarely places it directly. Renders nothing when `factors` is empty.

## Use it [#use-it]

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

```tsx
import { SallaCommentFactors } from '@salla.sa/twilight-components-react/comment-factors';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaCommentFactors } from '@salla.sa/twilight-components-react/comment-factors';

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

  return (
    <SallaCommentFactors id="factors" />
  );
}
```

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

## Properties [#properties]

| Property  | Attribute | Description                                                                                                                                                                                                                                                                                                                       | Type             | Default |
| --------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------- |
| `factors` | `factors` | The factor ratings to show, as an array of `{ name, rating, label? }`. `name` is the factor title, `rating` is a number from 1 to 5 and `label` optionally replaces the default text under the stars (Poor, Average, Good, Very good, Excellent, chosen from the rating). Set it as a JavaScript property, not an HTML attribute. | `ReviewFactor[]` | `[]`    |

## Related [#related]

Renders: [`<salla-rating-stars>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-stars).

Used inside: [`<salla-comment-item>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-item).