Rating

별점을 선택하거나 표시할 수 있는 컴포넌트입니다. 리뷰, 평가, 피드백 등에 활용할 수 있습니다.

설치

Terminal

npx @msub-core/ui-cli add rating

사용법

TSX

import { Rating } from "@msub-core/ui/components/rating"

function MyComponent() {
  const [value, setValue] = useState(0)

  return (
    <Rating
      value={value}
      onChange={setValue}
    />
  )
}

기본

Prop	Type	Default	Required	Description
value	number	-	No	현재 값 (controlled)
defaultValue	number	0	No	기본 값 (uncontrolled)
max	number	5	No	최대 별 개수
onChange	(value: number) => void	-	No	값 변경 핸들러
readOnly	boolean	false	No	읽기 전용 모드
disabled	boolean	false	No	비활성화
allowHalf	boolean	false	No	반 별 허용
showValue	boolean	false	No	값 표시

크기

default

반 별 (Half Star)

3.5

읽기 전용

4.5

3.0

값 표시 및 포맷

4.0

4점

4/5

라벨

좋음

커스텀 아이콘

선택 해제 가능

3.0

같은 별을 다시 클릭하면 0으로 초기화됩니다.

10점 만점

7.0

비활성화

RatingGroup

맛

4.0

서비스

5.0

분위기

4.0

가성비

3.0

RatingSummary

4.5

1,234개 리뷰

793

312