InputRate

El componente InputRate permite seleccionar una calificación de 0 a 5 utilizando estrellas interactivas. Es altamente personalizable y puede gestionar valores predeterminados o seleccionados por el usuario.

Ejemplo

Importación

Para importar el componente InputRate, se puede hacer desde fenextjs

import { InputRate } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
value	number	no	undefined	Valor actual de la calificación. Se espera un número entre 0 y 5.
defaultValue	number	no	0	Valor predeterminado de la calificación cuando no se proporciona 'value'.
className	string	no	''	Clase CSS para personalizar el contenedor principal del componente.
classNameContentStar	string	no	''	Clase CSS para personalizar el contenedor de las estrellas.
classNameStar	string	no	''	Clase CSS para personalizar las estrellas.
classNameStarActive	string	no	''	Clase CSS para personalizar las estrellas activas (calificadas).
classNameNumber	string	no	''	Clase CSS para personalizar la visualización del número de calificación.
onChange	(star: number) => void	no	undefined	Función que se ejecuta cuando cambia la calificación seleccionada.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Calificación básica

<InputRate />

Calificación con valor predeterminado

<InputRate defaultValue={3} />

Calificación con valor controlado

<InputRate value={4} onChange={(value) => console.log(value)} />

Calificación con personalización de clases

<InputRate className="custom-class" classNameStar="custom-star" />

Range Search