Los spinners determinan el estado de carga de nuestros componentes. Diseñar uno puede requerir grandes cantidades de código, esfuerzo y tiempo. Pero, afortunadamente, tenemos el paquete react-spinners-kit con nosotros.
Módulo react-spinners-kit: React-spinners-kit proporciona una colección de spinners de carga hechos de componentes con estilo . Podemos usar el kit de spinners de reacción y eliminar todas las molestias de crear spinners de carga mediante el uso de un conjunto de componentes prefabricados.
Características:
- Hay más de treinta cargadores con estilo diferentes para elegir, incluidos los clásicos spinners, cubos, ping-pong, pulsos, ondas, corazones, espirales, etc.
- Los hilanderos son personalizables y fáciles de usar.
- Podemos añadir diferentes colores a las ruletas.
- Incluso podemos especificar el tamaño de los giradores en px.
- Los spinners se pueden colocar fácilmente.
Accesorios:
- loading: Cada spinner toma un accesorio de carga, establecido de forma predeterminada en verdadero. Una vez que un accesorio de carga se pasa como falso, la ruleta no se renderizará.
- tamaño: cada spinner acepta un número de tamaño prop como un número para especificar el tamaño del spinner en px.
- color: Para especificar el color de la ruleta.
- frontColor y backColor: algunos controles giratorios aceptan dos colores que se pasan como strings para frontColor y backColor.
Veamos cómo se pueden implementar estos spinners en nuestro proyecto observando el siguiente ejemplo:
Enfoque: Usaremos varios spinners diferentes en nuestro proyecto usando el módulo react-spinners-kit. Agregaremos diferentes colores y tamaños a las ruletas.
Paso 1: Cree un directorio de proyectos, diríjase a la terminal y cree una aplicación de reacción llamada «spinner-kit» usando el siguiente comando:
npx create-react-app spinner-kit
Después de crear la aplicación spinner-kit, cambia al nuevo spinner-kit usando el siguiente comando:
cd spinner-kit
Paso 2: después de crear la aplicación React, instale el paquete react-spinner-kit con el siguiente comando:
npm i react-spinners-kit
Instalación del kit de spinners de reacción
Paso 3: Modifique la estructura de su proyecto. Modificaremos la carpeta y mantendremos los archivos que necesitamos para este proyecto. Cree un archivo style.css para diseñar nuestro componente. Ahora, asegúrese de que la estructura de su archivo se vea así:
Directorio de proyectos finales:
Directorio de proyectos finales
Paso 4: agregue código a su archivo index.html. Incluya el siguiente código en su archivo index.html, ubicado en la carpeta pública del directorio de su proyecto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content= "Web site created using create-react-app" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
Paso 7: agregar los diversos spinners del kit de spinner de reacción en nuestro componente de aplicación.
Debemos integrar un spinner de nuestra elección de un grupo de cargadores provistos por el kit de spinner de reacción en el proyecto. Cada spinner actúa como un componente diferente. yo
En este ejemplo, utilizaremos seis ruletas diferentes, es decir, PushSpinner, TraceSpinner, RainbowSpinner, RingSpinner, SwishSpinner, PongSpinner, MetroSpinner y JellyfishSpinner.
En primer lugar, importaremos todos los componentes giratorios para usar en nuestro proyecto.
import { PushSpinner,TraceSpinner, RainbowSpinner, RingSpinner,SwishSpinner,
PongSpinner,MetroSpinner, JellyfishSpinner} from "react-spinners-kit";
Para renderizar los componentes giratorios, necesitamos especificar un estado de carga usando los ganchos useState . De forma predeterminada, se establece como verdadero.
Luego, pasaremos los accesorios de carga, tamaño, color, color de fuente y color negro en los componentes PushSpinner, TraceSpinner, RainbowSPinner, RingSpinner, SwishSpinner, PongSpinner, MetroSpinner y JellyfishSpinner y estamos listos para comenzar.
Agregue el siguiente código al archivo App.js
Javascript
import './App.css';
import './style.css'
import { useState } from 'react';
import {
PushSpinner, TraceSpinner, RainbowSpinner,
RingSpinner, SwishSpinner, PongSpinner,
MetroSpinner, JellyfishSpinner
}
from "react-spinners-kit";
function App() {
const [loading, setLoading] = useState(true)
return (
<>
<p className='tag'>Spinners using react-spinners-kit</p>
<div className="spinnerContainer">
<div className="spinner">
<PushSpinner size={30} color="#00ff89"
loading={loading} />
</div>
<div className="spinner">
<TraceSpinner size={40} frontColor="green"
backColor="white" loading={loading} />
</div>
<div className="spinner">
<RainbowSpinner size={50} color="purple"
loading={loading} />
</div>
<div className="spinner">
<RingSpinner size={50} color="yellow"
loading={loading} />
</div>
<div className="spinner">
<SwishSpinner size={40} frontColor="blue"
backColor="white" loading={loading} />
</div>
<div className="spinner">
<PongSpinner size={60} color="pink"
loading={loading} />
</div>
<div className="spinner">
<MetroSpinner size={40} color="white"
loading={loading} />
</div>
<div className="spinner">
<JellyfishSpinner size={40} color="grey"
loading={loading} />
</div>
</div>
</>
);
}
export default App;
Paso 6: Apliquemos estilo a nuestra aplicación spinner-kit. Agregue el siguiente código en su archivo style.css.
estilo.css
CSS
.spinnerContainer {
margin: auto;
width: 50%;
height: 50%;
text-align: center;
position: absolute;
top: 50%;
transform: translate(50%, -50%);
background-color: black;
display: flex;
align-items: center;
flex-direction: row;
border-radius: 10px;
flex-wrap: wrap;
box-shadow: 0px 8px 8px rgba(23, 22, 22, 0.296);
}
.spinner {
margin: 5%;
padding: 20px;
border: 1px solid rgb(55, 53, 53);
}
.tag {
text-align: center;
font-size: 2rem;
color: green;
}
Paso 7: Su archivo index.js debería verse así. El archivo index.js sirve como punto de entrada principal y, dentro de él, el archivo App.js se representa en el ID raíz del DOM.
Javascript
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root"));
root.render(<App />);
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:
npm start
Salida: De forma predeterminada, el proyecto React se ejecutará en el puerto 3000. Puede acceder a él en localhost:3000 en su navegador. Así luce nuestro proyecto.
Salida: Spinners usando react-spinners-kit
Referencia: https://www.npmjs.com/package/react-spinners-kit
Publicación traducida automáticamente
Artículo escrito por codesaurav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA