Sådan opretter du en indlæsningsanimation i reaktion med React-spinnere

Genudgivet af Platon

Abonnenter: 0

Introduktion

Når du laver React-applikationer, der henter indhold fra eksterne kilder, som tager noget tid at indlæse, er det altid en god idé at give en behagelig brugeroplevelse ved at engagere brugerne og holde deres opmærksomhed med en indlæser, da dette hjælper brugerne med at forstå, hvad der foregår, i stedet for at lade dem spekulere.

I denne vejledning lærer vi, hvordan du viser loader-animation, når du indlæser en applikation og henter indhold fra eksterne kilder, ved at bruge react-spinners bibliotek.

Til det formål bygger vi en lille applikation, der henter tilbud, med en indlæsningsskærm, mens et tilbud hentes:

Hvis du gerne vil lære mere om at skabe spinnere fra bunden, så læs vores "Sådan opretter du en indlæsningsanimation i React from Scratch"!

Oprettelse af en Sample React-app

Lad os starte med at se på vores React-markering. Som udgangspunkt har vi to <div> elementer i forælder <div> (for nemhedens skyld) – en er den loader-container og den anden er 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;

Indtil videre har vi kun lavet en <div> til vores læsser. Lad os nu se, hvordan vi kan tilføje det og udløse det, når noget indhold indlæses.

Bemærk: Du kan tjekke ud dette arkiv og krydstjek koden, hvis det er nødvendigt, mens du læser denne vejledning.

Brug af React Spinners i vores applikation

react-spinner er en samling af mange spinnere, som vi kan bruge i vores React-applikationer. For at bruge React spinner skal vi først installere biblioteket i vores projekts bibliotek ved at køre en af følgende kommandoer:

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

Når det er gjort, kan vi nu importere den bestemte loader, vi vil bruge (i dette tilfælde, en ClipLoader) og indstil noget styling som størrelse og farve:

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;

react-spinner biblioteket har en masse nyttige funktioner, for eksempel kan vi bruge det til at håndtere indlæsning uden at bruge ternære operatører:

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

I stedet for at bruge ternær operator til at vise indholdet baseret på værdien af loadingInProgress variabel, har vi simpelthen brugt loading={loadingInProgress} i stedet.

Vi kan også ændre den CSS, der bruges til at kontrollere spinner-icon ved hjælp af 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;