react-ts-rating-star/dist/esm/components/Star.js

React TS Rating Star allows you to create a customizable rating star component with ease.

import React from 'react';
/**
 * Star component for displaying a single star.
 * @param props - The StarProps object containing the props for the Star component.
 * @returns JSX.Element representing the Star component.
 */
var Star = function (_a) {
    var currentStar = _a.currentStar, isActive = _a.isActive, iconColor = _a.iconColor, iconWidth = _a.iconWidth, iconHeight = _a.iconHeight, fillPercentage = _a.fillPercentage, animationClassName = _a.animationClassName, onClick = _a.onClick;
    return (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 47.94 47.94', xmlSpace: 'preserve', width: iconWidth, height: iconHeight, className: "rtrs-star ".concat(isActive ? 'rtrs-clicked-star' : '', " ").concat(animationClassName), onClick: function () { return onClick(currentStar); } },
        React.createElement("defs", null,
            React.createElement("clipPath", { id: 'rtrs-star-clip' },
                React.createElement(StarIcon, null))),
        React.createElement(StarIcon, null),
        React.createElement("rect", { x: '0', y: '0', width: "".concat(fillPercentage, "%"), height: '100%', fill: iconColor, clipPath: 'url(#rtrs-star-clip)', className: 'rtrs-star-progress' })));
};
export default Star;
/**
 * StarIcon component for rendering the star icon.
 * @returns JSX.Element representing the StarIcon component.
 */
var StarIcon = function () {
    return (React.createElement("path", { d: 'm26.285 2.486 5.407 10.956a2.58 2.58 0 0 0 1.944 1.412l12.091 1.757c2.118.308 2.963 2.91 1.431 4.403l-8.749 8.528a2.582 2.582 0 0 0-.742 2.285l2.065 12.042c.362 2.109-1.852 3.717-3.746 2.722l-10.814-5.685a2.585 2.585 0 0 0-2.403 0l-10.814 5.685c-1.894.996-4.108-.613-3.746-2.722l2.065-12.042a2.582 2.582 0 0 0-.742-2.285L.783 21.014c-1.532-1.494-.687-4.096 1.431-4.403l12.091-1.757a2.58 2.58 0 0 0 1.944-1.412l5.407-10.956c.946-1.919 3.682-1.919 4.629 0z' }));
};
//# sourceMappingURL=Star.js.map