💻 Coding
React Component Builder
Generates functional React components.
0Reviews
Prompt
Write a functional React component for a [Component Type]. Use Tailwind CSS for styling. Include prop validation and state management. Ensure the code is clean and follows modern practices.
Instructions
Specify the [Component Type] like navigation bar or pricing card.
Examples
Example Input
Write a functional React component for a [Star Rating Input ]. Use Tailwind CSS for styling. Include prop validation and state management. Ensure the code is clean and follows modern practices.
Example Output
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 (
<div className="flex items-center gap-1">
{[...Array(max)].map((_, index) => {
const ratingValue = index + 1;
const isActive = hovered
? ratingValue <= hovered
: ratingValue <= value;
return (
<button
key={ratingValue}
type="button"
aria-label={`Rate ${ratingValue} out of ${max}`}
onClick={() => handleClick(ratingValue)}
onMouseEnter={() => handleMouseEnter(ratingValue)}
onMouseLeave={handleMouseLeave}
disabled={readOnly}
className={`focus:outline-none transition-transform duration-150 ${
!readOnly && "hover:scale-110"
}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill={isActive ? "currentColor" : "none"}
viewBox="0 0 24 24"
stroke="currentColor"
className={`w-${size} h-${size} ${
isActive
? "text-yellow-400"
: "text-gray-300"
}`}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.122 6.53a1 1 0 00.95.69h6.865c.969 0 1.371 1.24.588 1.81l-5.555 4.036a1 1 0 00-.364 1.118l2.122 6.53c.3.921-.755 1.688-1.538 1.118l-5.555-4.036a1 1 0 00-1.176 0l-5.555 4.036c-.783.57-1.838-.197-1.538-1.118l2.122-6.53a1 1 0 00-.364-1.118L.522 11.957c-.783-.57-.38-1.81.588-1.81h6.865a1 1 0 00.95-.69l2.122-6.53z"
/>
</svg>
</button>
);
})}
</div>
);
};
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 (
<div className="p-6">
<StarRatingInput
max={5}
value={rating}
onChange={setRating}
/>
<p className="mt-2 text-sm text-gray-600">
Selected Rating: {rating}
</p>
</div>
);
};
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.