Twilight
EngineWeb components

salla-comment-factors

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-comments

<salla-comments> renders this component for you. You rarely use it directly.

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

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

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

Example

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" />
  );
}

Properties

PropertyAttributeDescriptionTypeDefault
factorsfactorsThe 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[][]

Renders: <salla-rating-stars>.

Used inside: <salla-comment-item>.

On this page

Use itExamplePropertiesRelated