종속성 없이 매우 단순한 Rating 구성 요소 구축

안녕하세요 여러분 👋 오늘 저는 다음과 같은 Rating 구성 요소를 구축하는 솔루션을 여러분과 공유하고 싶습니다.



상호 작용 기능이 없는 매우 간단한 구성 요소입니다. 단지 등급을 표시하기 위한 것입니다. 처음에는 타사 라이브러리를 사용하는 것에 대해 생각했지만 내가 찾은 라이브러리는 구식이고 간단한 작업으로는 매우 무거웠습니다(>70kb). 그래서 계속해서 직접 빌드했습니다.

코드:

import { useId } from "react";

const Star = ({ variant }: { variant: "filled" | "empty" | "half" }) => {
  const id = useId();

  let c1, c2;
  if (variant === "filled") {
    c1 = "#FBBC05";
    c2 = "#FBBC05";
  } else if (variant === "empty") {
    c1 = "#C4C4C4";
    c2 = "#C4C4C4";
  } else if (variant === "half") {
    c1 = "#FBBC05";
    c2 = "#C4C4C4";
  }

  return (
    <svg
      width="20"
      height="19"
      viewBox="0 0 20 19"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id={id}>
          <stop offset="50%" stopColor={c1} />
          <stop offset="50%" stopColor={c2} />
        </linearGradient>
      </defs>
      <path
        d="M10 0.148438L12.935 6.14144L19.5 7.10844L14.75 11.7704L15.871 18.3564L10 15.2454L4.129 18.3564L5.25 11.7704L0.5 7.10844L7.064 6.14144L10 0.148438Z"
        fill={`url(#${id})`}
      />
    </svg>
  );
};

const Rating = ({ rating, max = 5 }: { rating: number; max?: number }) => {
  return (
    <div className="flex items-center">
      {Array.from({ length: Math.floor(rating) }, (_, i) => (
        <Star key={i} variant="filled" />
      ))}
      {!Number.isInteger(rating) && <Star variant="half" />}
      {Array.from({ length: max - Math.ceil(rating) }, (_, i) => (
        <Star key={i} variant="empty" />
      ))}
    </div>
  );
};

export default Rating;

🚨 lineargradient svg 필드에 고유한 항목이 필요하기 때문에 React 18 useId 후크를 사용하고 있음을 깨달으십시오.

용법:

() => {
  return (
    <div>
      <Rating rating={1} />
      <Rating rating={1.5} />
      <Rating rating={2} />
      <Rating rating={2.5} />
      <Rating rating={3} />
      <Rating rating={3.5} />
      <Rating rating={4} />
      <Rating rating={4.5} />
      <Rating rating={5} />
    </div>
  )
}

모래 상자: