Here’s a clean, modern Star Rating Input React component using Tailwind CSS, functional hooks, and PropTypes validation. import React, { useState } from "react"; import PropTypes from "prop-types"; const StarRatingInput = ({ max = 5, value = 0, onChange, size = 6, readOnly = false, }) => { const [hovered, setHovered] = useState(null); const handleClick = (rating) => { if (!readOnly && onChange) { onChange(rating); } }; const handleMouseEnter = (rating) => { if (!readOnly) { setHovered(rating); } }; const handleMouseLeave = () => { if (!readOnly) { setHovered(null); } }; return (

{[...Array(max)].map((_, index) => { const ratingValue = index + 1; const isActive = hovered ? ratingValue <= hovered : ratingValue <= value; return ( ); })}

); }; StarRatingInput.propTypes = { max: PropTypes.number, value: PropTypes.number, onChange: PropTypes.func, size: PropTypes.number, readOnly: PropTypes.bool, }; export default StarRatingInput; Example Usage import React, { useState } from "react"; import StarRatingInput from "./StarRatingInput"; const Example = () => { const [rating, setRating] = useState(3); return (

Selected Rating: {rating}

); }; export default Example; Features Included Controlled component (via value + onChange) Hover preview state Tailwind CSS styling Smooth hover animation Accessible (aria-label) PropTypes validation Read-only mode support If you'd like half-star support or keyboard accessibility enhancement, I can extend it further.

#react

React Component Builder