react-flexible-star-rating/dist/components/StarRating.d.ts

A flexible and customizable React star rating component.

/**
 * Props for the StarRating component.
 */
interface StarRatingProps {
    /**
     * Total number of stars to display.
     * @default 5
     * @type {number}
     */
    starsLength?: number;
    /**
     * Enables or disables half-star ratings.
     * @default false
     * @type {boolean}
     */
    isHalfRatingEnabled?: boolean;
    /**
     * Determines whether mouse hover behavior is enabled.
     * @default true
     * @type {boolean}
     */
    isHoverEnabled?: boolean;
    /**
     * If true, the component is non-interactive and only displays the rating.
     * @default false
     * @type {boolean}
     */
    isReadOnly?: boolean;
    /**
     * The initial rating to display.
     * Should be in the range of 0 <= initialRating <= starsLength.
     * Can be multiples of either 1 or 0.5 based on `isHalfRatingEnabled`.
     *
     * - If `isHalfRatingEnabled` is true:
     *   Values like 0.5, 1.0, 1.5, etc. are allowed.
     * - If `isHalfRatingEnabled` is false:
     *   Integer values like 0, 1, 2, etc. are allowed.
     *
     * @default 0
     * @type {number}
     */
    initialRating?: number;
    /**
     * Dimension of the stars (width and height, in rem unit, 1rem is 16px by default).
     * @default Depends on the dimension defined in the star components.
     * @type {number}
     */
    dimension?: number;
    /**
     * The HEX color code used for the stars.
     * This property allows you to customize the color of the stars in the rating component.
     *
     * Example:
     * - "#FFD700" for gold-colored stars
     * - "#FF0000" for red-colored stars
     *
     * @default undefined - Defaults to the internal color setting if not specified.
     * @type {string}
     */
    color?: string;
    /**
     * Callback function for handling rating changes.
     *
     * This function is triggered whenever the user updates the rating in the `StarRating` component.
     *
     * @param {number} newRating - The new rating value selected by the user.
     *
     * @example
     * // Example usage in the parent component:
     * const handleRatingChange = (newRating: number) => {
     *    console.log("Updated rating: ", newRating);
     * };
     *
     * <StarRating onRatingChange={handleRatingChange} />
     */
    onRatingChange?: (newRating: number) => void;
}
/**
 * StarRating Component
 *
 * A flexible and customizable star rating component that supports
 * full and half-star ratings with interactive hover and click states.
 *
 * - Provides smooth transitions on hover.
 * - Dynamically updates based on user interaction.
 *
 * @param {StarRatingProps} props - The configuration options for the component.
 * @returns {JSX.Element} The rendered star rating component.
 */
export declare function StarRating({ starsLength, initialRating, isHalfRatingEnabled, isReadOnly, isHoverEnabled, dimension, color, onRatingChange, }: StarRatingProps): JSX.Element;
export {};
//# sourceMappingURL=StarRating.d.ts.map