Cara Membuat Animasi Pemuatan di React Dengan React-spinner

Diterbitkan Ulang Oleh Plato

Followers: 0

Pengantar

Saat membuat aplikasi React yang mengambil konten dari sumber eksternal yang membutuhkan waktu untuk memuat, selalu merupakan ide yang baik untuk memberikan pengalaman pengguna yang menyenangkan dengan melibatkan pengguna dan menjaga perhatian mereka dengan loader, karena ini membantu pengguna memahami apa yang sedang terjadi. daripada membiarkan mereka berspekulasi.

Dalam panduan ini, kita akan mempelajari cara menampilkan animasi loader saat memuat aplikasi dan mengambil konten dari sumber eksternal, dengan memanfaatkan react-spinners Perpustakaan.

Untuk itu – kami akan membangun aplikasi kecil yang mengambil kutipan, dengan layar pemuatan saat kutipan sedang diambil:

Jika Anda ingin mempelajari lebih lanjut tentang membuat pemintal dari awal, baca kami “Cara Membuat Animasi Loading di React from Scratch”!

Membuat Contoh Aplikasi React

Mari kita mulai dengan melihat markup React kita. Pada dasarnya, kami memiliki dua <div> elemen dalam induk <div> (demi kesederhanaan) – salah satunya adalah loader-container dan yang kedua adalah 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;

Sejauh ini, kami hanya membuat <div> untuk pemuat kami. Sekarang, mari kita lihat bagaimana kita dapat menambahkannya dan memicunya ketika beberapa konten dimuat.

Catatan: Anda dapat memeriksa repositori ini dan periksa ulang kode jika perlu saat membaca panduan ini.

Menggunakan React Spinners di Aplikasi Kami

react-spinner adalah kumpulan dari banyak spinner yang dapat kita gunakan dalam aplikasi React kita. Untuk menggunakan React spinner, pertama-tama kita harus menginstal pustaka di direktori proyek kita dengan menjalankan salah satu dari perintah berikut:

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

Setelah selesai, sekarang kita dapat mengimpor loader tertentu yang ingin kita gunakan (dalam hal ini, a ClipLoader) dan atur beberapa gaya seperti ukuran dan warna:

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;

Grafik react-spinner library memiliki banyak fitur yang berguna, misalnya, kita dapat menggunakannya untuk menangani pemuatan tanpa menggunakan operator ternary:

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

Alih-alih menggunakan operator ternary untuk menampilkan konten berdasarkan nilai loadingInProgress variabel, kami hanya menggunakan loading={loadingInProgress} sebagai gantinya.

Kami juga dapat mengubah CSS yang digunakan untuk mengontrol spinner-icon dengan menggunakan override atribut:

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;

Catatan: Kita dapat membaca lebih lanjut tentang react-spinner dalam dokumentasi, di mana kita dapat melihat daftar pendosa yang tersedia juga.

Kesimpulan

Dalam panduan singkat ini, kami telah melihat bagaimana Anda dapat menggunakan react-spinners untuk menambahkan pemintal pemuatan ke elemen di React.

Stempel Waktu: Juni 7, 2022