Reactで星評価機能を実装する

react-awesome-stars-ratingというライブラリを使用して、
下記のような星評価機能を実装しました。
https://github.com/fedoryakubovich/react-awesome-stars-rating

使い方

npmにreact-awesome-stars-ratingをインストールする。

npm install react-awesome-stars-rating

ReactStarsRatingコンポーネントをimportして使用する。

Star.jsx

import { useState } from "react";
import ReactStarsRating from 'react-awesome-stars-rating';

export const Star = () => {
  const onChange = (value) => {
    setValue(value)
  };

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

  return (
    <>
      <ReactStarsRating onChange={onChange} value={value} />
    </>
  )
}

星の色や数も変更することができます。
設定値についてはドキュメントに記載されています。
https://github.com/fedoryakubovich/react-awesome-stars-rating#documentation