Rating

Rating

평점을 선택하고 표시하는 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Rating으로 별점을 선택하거나 표시해요. color, size, count, highlightSelectedOnly 등의 prop을 지원해요.

import { Rating } from '@mantine/core';

function Demo() {
  return <Rating defaultValue={3} />;
}

제어 방식 (Controlled)

import { useState } from 'react';
import { Rating } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(0);
  return <Rating value={value} onChange={setValue} />;
}

비제어 방식 (Uncontrolled)

Rating은 네이티브 인풋 요소와 같은 방식으로 비제어 폼과 함께 사용할 수 있어요. 폼 제출 시 FormData 객체에 평점 값을 포함하려면 name 속성을 설정해요. 비제어 폼에서 초기 값을 제어하려면 defaultValue prop을 사용해요.

FormData와 함께 비제어 Rating을 사용하는 예시:

import { Rating } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Rating value:', formData.get('rating'));
      }}
    >
      <Rating name="rating" />
      <button type="submit">Submit</button>
    </form>
  );
}

읽기 전용 (Read only)

import { Rating } from '@mantine/core';

function Demo() {
  return <Rating value={3.5} fractions={2} readOnly />;
}

지우기 허용 (Allow clear)

allowClear prop을 설정하면 사용자가 같은 평점 값을 다시 클릭해 평점을 0으로 초기화할 수 있어요. 사용자에게 평점 선택을 되돌릴 수 있는 기능을 주고 싶을 때 유용해요.

import { useState } from 'react';
import { Group, Rating, Stack, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(3);

  return (
    <Stack>
      <Text>Click the same star to clear the rating</Text>
      <Group>
        <Rating value={value} onChange={setValue} allowClear />
        <Text>Current rating: {value === 0 ? 'Not rated' : value}</Text>
      </Group>
    </Stack>
  );
}

분수 (Fractions)

import { Rating, Group, Stack } from '@mantine/core';

function Demo() {
  return (
    <Stack>
      <Group><Rating defaultValue={3.5} fractions={2} />Fractions: 2</Group>
      <Group><Rating defaultValue={3.5} fractions={3} />Fractions: 3</Group>
      <Group><Rating defaultValue={3.5} fractions={4} />Fractions: 4</Group>
    </Stack>
  );
}

커스텀 심볼 (Custom symbol)

import { Rating } from '@mantine/core';
import { SunIcon, MoonIcon } from '@phosphor-icons/react';

function Demo() {
  return <Rating emptySymbol={<MoonIcon size={24} />} fullSymbol={<SunIcon size={24} />} />;
}

항목별 심볼 (Symbols for each item)

import { Rating } from '@mantine/core';
import { SmileySadIcon, SmileyNervousIcon, SmileyIcon, SmileyMehIcon, SmileyWinkIcon } from '@phosphor-icons/react';

const getIconStyle = (color?: string) => ({
  width: 24,
  height: 24,
  color: color ? `var(--mantine-color-${color}-7)` : undefined,
});

const getEmptyIcon = (value: number) => {
  const iconStyle = getIconStyle();

  switch (value) {
    case 1: return <SmileySadIcon style={iconStyle} />;
    case 2: return <SmileyNervousIcon style={iconStyle} />;
    case 3: return <SmileyMehIcon style={iconStyle} />;
    case 4: return <SmileyIcon style={iconStyle} />;
    case 5: return <SmileyWinkIcon style={iconStyle} />;
    default: return null;
  }
};

const getFullIcon = (value: number) => {
  switch (value) {
    case 1: return <SmileySadIcon style={getIconStyle('red')} />;
    case 2: return <SmileyNervousIcon style={getIconStyle('orange')} />;
    case 3: return <SmileyMehIcon style={getIconStyle('yellow')} />;
    case 4: return <SmileyIcon style={getIconStyle('lime')} />;
    case 5: return <SmileyWinkIcon style={getIconStyle('green')} />;
    default: return null;
  }
};

function Demo() {
  return (
    <Rating
      emptySymbol={getEmptyIcon}
      fullSymbol={getFullIcon}
    />
  );
}

더 알아보기 (Learn more)

• RangeSlider
• SegmentedControl