RatingDisplay

View .md

Read-only display of an average rating with stars and count.

Default

Loading interactive example. Full source is available below.

View example source
Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Default = (): JSXElement => <RatingDisplay value={4}/>;

export default Default;
API referenceGenerated CoreAI prop and type summaries

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

RatingDisplay API

RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value as well as the label for the rating.

interface RatingDisplayProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Color of the rating items (stars).
   * @default neutral
   */
  color?: string;

  /**
   * Renders a single filled star, with the value written next to it.
   * @default false
   */
  compact?: boolean;

  /**
   * The number of ratings represented by the rating value.
   * This will be formatted with a thousands separator (if applicable) and displayed next to the value.
   */
  count?: number;

  countText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The icon used for rating items.
   * @default StarFilled
   */
  icon?: ElementType<any, keyof IntrinsicElements>;

  /**
   * The max value of the rating. This controls the number of rating items displayed.
   * Must be a whole number greater than 1.
   * @default 5
   */
  max?: number;

  ref?: Ref<HTMLDivElement>;

  /**
   * Sets the size of the RatingDisplay items.
   * @default medium
   */
  size?: "small" | "medium" | "large" | "extra-large";

  style?: CSSProperties;

  /**
   * The value of the rating
   */
  value?: number;

  valueText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;
}

Implementation

CoreAI 0.12.0; Fluent 9.74.9.

Setup and dependencies.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.

Color

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Color = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <RatingDisplay value={3}/>

      <RatingDisplay color="brand" value={3}/>

      <RatingDisplay color="marigold" value={3}/>
    </div>);
};

export default Color;

Compact

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Compact = (): JSXElement => <RatingDisplay compact value={3} count={1160}/>;

export default Compact;

Count

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Count = (): JSXElement => {
    return <RatingDisplay value={5} count={1160}/>;
};

export default Count;

Max

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Max = (): JSXElement => {
    return <RatingDisplay max={10} value={5}/>;
};

export default Max;

Shape

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import { CircleFilled } from "@fluentui/react-icons";
import { SquareFilled } from "@fluentui/react-icons";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Shape = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <RatingDisplay icon={CircleFilled} value={3.5}/>
      <RatingDisplay icon={SquareFilled} value={3.5}/>
    </div>);
};

export default Shape;

Size

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Size = (): JSXElement => {
    const classes = useStyles();
    return (<div className={classes.root}>
      <RatingDisplay value={3} size="small"/>
      <RatingDisplay value={3} size="medium"/>
      <RatingDisplay value={3} size="large"/>
      <RatingDisplay value={3} size="extra-large"/>
    </div>);
};

export default Size;

Value

Loading interactive example. Full source is available below.

Download source
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Value = (): JSXElement => {
    const classes = useStyles();
    return (<div className={classes.root}>
      <RatingDisplay value={1}/>
      <RatingDisplay value={3.7}/>
      <RatingDisplay value={3.9}/>
      <RatingDisplay value={5}/>
    </div>);
};

export default Value;