Kuinka luoda latausanimaatio Reactissa React-spinnereiden kanssa

Julkaissut Platon

seuraajia: 0

esittely

Kun luot React-sovelluksia, jotka hakevat sisältöä ulkoisista lähteistä, joiden latautuminen kestää jonkin aikaa, on aina hyvä idea tarjota miellyttävä käyttökokemus houkuttelemalla käyttäjiä ja pitämällä heidän huomionsa latauslaitteella, koska tämä auttaa käyttäjiä ymmärtämään, mitä on tekeillä. kuin jättää heidät spekuloimaan.

Tässä oppaassa opimme näyttämään latausanimaatioita ladattaessa sovellusta ja haettaessa sisältöä ulkoisista lähteistä käyttämällä react-spinners kirjasto.

Tätä varten rakennamme pienen sovelluksen, joka hakee lainauksia ja jossa on latausnäyttö samalla, kun tarjousta haetaan:

Jos haluat oppia lisää spinnereiden luomisesta tyhjästä, lue meidän "Kuinka luodaan latausanimaatio Reactissa tyhjästä"!

Esimerkkireaktiosovelluksen luominen

Aloitetaan katsomalla React-merkintää. Periaatteessa meitä on kaksi <div> elementit vanhempi <div> (yksinkertaisuuden vuoksi) – yksi on loader-container ja toinen on 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;

Toistaiseksi olemme luoneet vain a <div> kuormaimellemme. Katsotaan nyt, kuinka voimme lisätä sen ja käynnistää sen, kun sisältöä latautuu.

Huomautus: Voit tarkistaa tämän arkiston ja tarkista koodi tarvittaessa lukiessasi tätä opasta.

React Spinnereiden käyttäminen sovelluksessamme

react-spinner on kokoelma monia spinnereita, joita voimme käyttää React-sovelluksissamme. Käyttääksemme React-spinneriä meidän on ensin asennettava kirjasto projektimme hakemistoon suorittamalla jokin seuraavista komennoista:

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

Kun tämä on tehty, voimme nyt tuoda tietyn lataajan, jota haluamme käyttää (tässä tapauksessa a ClipLoader) ja määritä tyyli, kuten koko ja väri:

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 kirjastossa on paljon hyödyllisiä ominaisuuksia, esimerkiksi voimme käyttää sitä latauksen käsittelyyn ilman kolmiosaisia operaattoreita:

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

Sen sijaan, että käyttäisit kolmiosaista operaattoria sisällön näyttämiseen arvon perusteella loadingInProgress muuttuja, olemme yksinkertaisesti käyttäneet loading={loadingInProgress} sen sijaan.

Voimme myös muuttaa CSS:ää, jota käytetään ohjaamaan spinner-icon käyttämällä override määrite:

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;