> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useRatingMenu

> React Hook for refining search results by selecting star ratings.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

## About this Hook

The `useRatingMenu` Hook isn't part of React InstantSearch.
You can make a custom version with [`useConnector`](/doc/api-reference/widgets/connector/react)
and [`connectRatingMenu`](/doc/api-reference/widgets/rating-menu/js).

This Hook lets users refine search results by clicking on stars (based on the selected attribute).

## Examples

<CodeGroup>
  ```jsx JavaScript theme={"system"}
  import { useConnector } from "react-instantsearch";
  import connectRatingMenu from "instantsearch.js/es/connectors/rating-menu/connectRatingMenu";

  export function useRatingMenu(props) {
    return useConnector(connectRatingMenu, props);
  }

  export function RatingMenu(props) {
    const { items, refine, createURL } = useRatingMenu(props);

    return (
      <ul>
        {items.map((item) => (
          <li>
            <a
              aria-label={`${item.value} &amp; up`}
              href={createURL(item.value)}
              onClick={(event) => {
                event.preventDefault();

                refine(item.value);
              }}
            >
              {item.stars.map((isFilled, index) => (
                <svg
                  key={index}
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  strokeWidth={isFilled ? 0 : 1.5}
                  fill="currentColor"
                  aria-hidden="true"
                  width="24"
                  height="24"
                >
                  {isFilled ? (
                    <path
                      fillRule="evenodd"
                      clipRule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                    />
                  ) : (
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
                    />
                  )}
                </svg>
              ))}

              <span>{item.value} &amp; Up</span>
              <span>{item.count} matched results</span>
            </a>
          </li>
        ))}
      </ul>
    );
  }
  ```

  ```tsx TypeScript theme={"system"}
  import { useConnector } from "react-instantsearch";
  import connectRatingMenu from "instantsearch.js/es/connectors/rating-menu/connectRatingMenu";

  import type {
    RatingMenuConnectorParams,
    RatingMenuWidgetDescription,
  } from "instantsearch.js/es/connectors/rating-menu/connectRatingMenu";

  export type UseRatingMenuProps = RatingMenuConnectorParams;

  export function useRatingMenu(props?: UseRatingMenuProps) {
    return useConnector<RatingMenuConnectorParams, RatingMenuWidgetDescription>(
      connectRatingMenu,
      props
    );
  }

  export function RatingMenu(props: UseRatingMenuProps) {
    const { items, refine, createURL } = useRatingMenu(props);

    return (
      <ul>
        {items.map((item) => (
          <li>
            <a
              aria-label={`${item.value} &amp; up`}
              href={createURL(item.value)}
              onClick={(event) => {
                event.preventDefault();

                refine(item.value);
              }}
            >
              {item.stars.map((isFilled, index) => (
                <svg
                  key={index}
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  strokeWidth={isFilled ? 0 : 1.5}
                  fill="currentColor"
                  aria-hidden="true"
                  width="24"
                  height="24"
                >
                  {isFilled ? (
                    <path
                      fillRule="evenodd"
                      clipRule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                    />
                  ) : (
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
                    />
                  )}
                </svg>
              ))}

              <span>{item.value} &amp; Up</span>
              <span>{item.count} matched results</span>
            </a>
          </li>
        ))}
      </ul>
    );
  }
  ```
</CodeGroup>