Al trabajar con React, eventualmente podemos encontrarnos con la necesidad de hacer un sistema de ranking con estrellas, ya sea que quieras usarlo para e-commerce, alguna tienda o algún sistema de calificación.
En un futuro blog enseñaré cómo aplicarlo a un proyecto más real con datos del backend para simular un sistema de rating real.
Recursos
Resultado
Al proyecto de Codesandbox le agregué un input para que puedas modificar el rating a tu gusto desde el 0 al 5 incluyendo decimales.
Explicación
1. create-react-app
Primero tenemos que crear la aplicación con npx create-react-app <Proyecto>
. Luego elimina los archivos innecesarios.
2. Creación del componente y estructura
Dentro de src/
, crea una carpeta donde estará el sistema de estrellas, en mi caso lo llamaré StarRating/
, adentro agrega un index.js
y styles.css
.
El src/
quedaría de esta manera:
src
│
└───StarRating
│ │ index.js
│ │ styles.css
│
└───App.js
│
└───index.js
│
└───styles.css
3. App.js
Al principio del archivo App.js
importamos el componente que ya creamos import StarRating from "./StarRating"
.
Y dentro del return
lo pondré de la siguiente forma:
<div className="App">
<h1>Star Rating</h1>
<StarRating stars="3.5" />
</div>
4. Estilos de las estrellas
Antes de la funcionalidad, tenemos que estilizar las estrellas. Para eso importaremos FontAwesome a través de su CDN, y usaremos el ícono de estrella a partir de su id unicode (f005
).
Crearemos dos clases, una representa las estrellas vacías y la otra las estrellas amarillas:
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css");
.stars-gray {
position: relative;
display: inline-block;
}
.stars-yellow {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
width: 0;
}
.stars-gray::before {
content: "\\f005 \\f005 \\f005 \\f005 \\f005";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #ccc;
}
.stars-yellow::before {
content: "\\f005 \\f005 \\f005 \\f005 \\f005";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #f8ce0b;
}
5. Estructura del StarRating
Con todo esto hecho, podemos empezar a hacer la estructura y funcionalidad.
Importamos los estilos y creamos la función del componente.
import './styles.css'
export default function StarRating({ stars }) {
// Código
}
6. Contenido del StarRating
Voy a explicar el siguiente código con comentarios, ahí estará todo:
// Máxima cantidad de estrellas
const maxStars = 5;
// Obtenemos el valor completo
const starPercentage = (stars / maxStars) * 100;
// Redondeamos el resultado si es decimal
const starPercentageRounded = Math.round(starPercentage);
// Creamos el estilo para que las estrellas amarillas
// se vean según el número que recibimos.
const StarStyles = () => {
return {
width: starPercentageRounded + "%"
};
};
return (
<div className="stars-gray">
<div className="stars-yellow" style={StarStyles()}></div>
</div>
);
Resultado final
Así te debería quedar el resultado:
![[star_rating.png]]
Final
Recuerda que crearemos un post en el futuro para simular un ejemplo más real donde podamos crear las estrellas a partir de datos del backend
Si te gustó este blog, recuerda dar like y save y seguirnos en nuestro perfil de DEV Community.
¡Muchas gracias por leer!
Top comments (0)