Rating

Rating (평점)

Rating은 리뷰와 평점을 시각적인 형식으로 보여줄 때 사용해요. 보통 별(star) 아이콘으로 평점을 표현해요.

출처: 문서

본문

사용법 (Usage)

import { RatingGroup } from "@chakra-ui/react"

<RatingGroup.Root>
  <RatingGroup.Label />
  <RatingGroup.HiddenInput />
  <RatingGroup.Control>
    <RatingGroup.Item>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  </RatingGroup.Control>
</RatingGroup.Root>

:::info

클로즈드 컴포넌트 구성(closed component composition)을 선호한다면, 아래의 스니펫을 확인하세요.

:::

단축 속성 (Shortcuts)

Rating 컴포넌트는 자주 쓰는 사용 사례를 위한 단축 속성을 제공해요.

RatingControl

이 컴포넌트는 count prop에 지정된 수만큼의 평점 아이템을 렌더링해요.

이렇게 써도 동작해요:

<RatingGroup.Control>
  {Array.from({ length: 5 }).map((_, index) => (
    <RatingGroup.Item key={index} index={index + 1}>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  ))}
</RatingGroup.Control>

평점 아이콘을 커스터마이즈할 필요가 없다면 이렇게 더 간결하게 쓸 수 있어요:

<RatingGroup.Control />

예시 (Examples)

크기 (Sizes)

size prop을 사용해 평점 컴포넌트의 크기를 바꿀 수 있어요.

Controlled

value와 onValueChange prop을 사용해 평점 값을 제어할 수 있어요.

스토어 (Store)

평점을 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useRatingGroup 스토어 훅을 사용하는 것이에요. 이렇게 하면 컴포넌트 바깥에서 평점 상태와 메서드에 접근할 수 있어요.

ReadOnly

readOnly prop을 사용해 평점 컴포넌트를 읽기 전용으로 만들 수 있어요.

Hook Form

평점을 react-hook-form과 함께 사용하는 예시예요.

커스텀 아이콘 (Custom Icon)

icon prop을 사용해 평점 컴포넌트에 커스텀 아이콘을 전달할 수 있어요. 기본 별 아이콘을 덮어쓰게 돼요.

레이블 (Label)

RatingGroup.Label 컴포넌트를 렌더링해 평점 컴포넌트에 사람이 읽을 수 있는 레이블을 제공할 수 있어요.

반 별점 (Half Star)

allowHalf prop을 사용해 반 별점을 허용할 수 있어요.

이모지 (Emoji)

평점 컴포넌트를 이모지와 함께 구성(compose)할 수 있어요.

색상 (Colors)

colorPalette prop을 사용해 평점의 색상을 바꿀 수 있어요.

클로즈드 컴포넌트 (Closed Component)

클로즈드 컴포넌트 구성을 위해 Rating을 설정하는 방법을 보여줘요.

사용 방법은 다음과 같아요:

<Rating defaultValue={3} size="sm" />

Props

RatingGroup의 Root, Item 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.