Hur man skapar en laddningsanimation i reaktion med React-snurrar

Återutgiven av Platon

anhängare: 0

Beskrivning

När du skapar React-applikationer som hämtar innehåll från externa källor som tar lite tid att ladda, är det alltid en bra idé att ge en trevlig användarupplevelse genom att engagera användare och hålla deras uppmärksamhet med en laddare, eftersom detta hjälper användarna att förstå vad som händer snarare än att låta dem spekulera.

I den här guiden kommer vi att lära oss hur du visar laddaranimering när du laddar en applikation och hämtar innehåll från externa källor, genom att använda react-spinners bibliotek.

För det ändamålet kommer vi att bygga en liten applikation som hämtar offerter, med en laddningsskärm medan en offert hämtas:

Om du vill lära dig mer om att skapa spinnare från grunden, läs vår "Hur man skapar en laddningsanimation i React from Scratch"!

Skapa en Sample React-app

Låt oss börja med att titta på vår React-uppmärkning. I princip har vi två <div> element i förälder <div> (för enkelhetens skull) – en är den loader-container och den andra är main-content:

import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;

Hittills har vi bara skapat en <div> till vår lastare. Låt oss nu se hur vi kan lägga till det och aktivera det när något innehåll laddas.

Notera: Du kan kolla in detta förvar och krysskolla koden om det behövs medan du läser den här guiden.

Använda React Spinners i vår applikation

react-spinner är en samling av många spinnare som vi kan använda i våra React-applikationer. För att använda React spinner måste vi först installera biblioteket i vårt projekts katalog genom att köra något av följande kommando:

$ npm install --save react-spinners
// Or
$ yarn add react-spinners

När det är gjort kan vi nu importera den speciella laddaren vi vill använda (i det här fallet, en ClipLoader) och ställ in lite styling som storlek och färg:

import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;

Smakämnen react-spinner biblioteket har många användbara funktioner, till exempel kan vi använda det för att hantera laddning utan att använda ternära operatorer:

<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />

Istället för att använda ternär operator för att visa innehållet baserat på värdet av loadingInProgress variabel, vi har helt enkelt använt loading={loadingInProgress} istället.

Vi kan också ändra CSS som används för att kontrollera spinner-icon genom att använda en override attribut:

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;