Introductie

Bij het maken van React-applicaties die inhoud ophalen van externe bronnen die enige tijd nodig hebben om te laden, is het altijd een goed idee om een ​​prettige gebruikerservaring te bieden door gebruikers te betrekken en hun aandacht vast te houden met een loader, omdat dit gebruikers helpt te begrijpen wat er aan de hand is in plaats van dan ze te laten speculeren.

In deze handleiding zullen we leren hoe u loader-animatie kunt weergeven bij het laden van een toepassing en het ophalen van inhoud van externe bronnen, door gebruik te maken van de react-spinners bibliotheek.

Daartoe bouwen we een kleine applicatie die offertes ophaalt, met een laadscherm terwijl een offerte wordt opgehaald:

Als je meer wilt weten over het helemaal opnieuw maken van spinners, lees dan onze "Hoe maak je een laadanimatie in React from Scratch"!

Een React-voorbeeldapp maken

Laten we beginnen met te kijken naar onze React-markeringen. In principe hebben we er twee <div> elementen in de ouder <div> (voor de eenvoud) - een is de loader-container en de tweede is de 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;

Tot nu toe hebben we alleen een <div> voor onze lader. Laten we nu eens kijken hoe we het kunnen toevoegen en activeren wanneer bepaalde inhoud wordt geladen.

Opmerking: U kunt kijken op deze repository en controleer de code indien nodig tijdens het lezen van deze handleiding.

React Spinners gebruiken in onze applicatie

react-spinner is een verzameling van vele spinners die we kunnen gebruiken in onze React-applicaties. Om React spinner te gebruiken, moeten we eerst de bibliotheek in de map van ons project installeren door een van de volgende opdrachten uit te voeren:

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

Zodra dat is gebeurd, kunnen we nu de specifieke lader importeren die we willen gebruiken (in dit geval a ClipLoader) en stel een aantal stijlen in, zoals grootte en kleur:

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;

De react-spinner bibliotheek heeft veel handige functies, we kunnen het bijvoorbeeld gebruiken om het laden af ​​te handelen zonder ternaire operators te gebruiken:

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

In plaats van de ternaire operator te gebruiken om de inhoud weer te geven op basis van de waarde van de loadingInProgress variabel, we hebben gewoon gebruikt loading={loadingInProgress} gebruiken.

We kunnen ook de CSS wijzigen die wordt gebruikt om de spinner-icon door een te gebruiken override attribuut:

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;

Opmerking: We kunnen meer lezen over react-spinner in de documentatie, waar we ook een lijst met beschikbare zondaars kunnen zien.

Conclusie

In deze korte handleiding hebben we bekeken hoe u kunt gebruiken react-spinners om een ​​loading spinner toe te voegen aan een element in React.