سرور مجازی NVMe

روش ایجاد یک انیمیشن بارگذاری در React با react-spinners هنگام ایجاد برنامه‌های React که محتوا را از منابع خارجی واکشی می‌کنند و بارگذاری آن مدتی طول می‌کشد، همیشه ایده خوبی است که با درگیر کردن کاربران و حفظ توجه آن‌ها با لودر، تجربه‌ای دلپذیر برای کاربر فراهم کنید. ، زیرا این به کاربران کمک می کند بفهمند چه اتفاقی می افتد روی به جای رفتن…

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۱۸, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 3 دقیقه

معرفی

هنگام ایجاد برنامه‌های React که محتوا را از منابع خارجی واکشی می‌کنند و بارگیری آن مدتی طول می‌کشد، همیشه ایده خوبی است که با درگیر کردن کاربران و حفظ توجه آن‌ها با لودر، تجربه کاربری دلپذیری را ارائه دهید، زیرا این به کاربران کمک می‌کند بفهمند چه اتفاقی می‌افتد. روی به جای اینکه آنها را به حدس و گمان رها کنیم.

در این راهنما، روش نمایش انیمیشن لودر هنگام بارگذاری برنامه و بازیابی محتوا از منابع خارجی را با استفاده از react-spinners کتابخانه

برای این منظور – ما یک برنامه کوچک را که به نقل از آنها می پردازد ، با صفحه بارگذاری در حالی که نقل قول در حال انجام است ، می سازیم:

اگر می خواهید در مورد ایجاد اسپینرها از ابتدا اطلاعات بیشتری کسب کنید ، ما را بخوانید “چگونه می توان یک انیمیشن بارگیری را در واکنش از ابتدا ایجاد کرد”!

ایجاد یک Sample React App

بیایید با نگاهی به نشانه گذاری React خود شروع کنیم. اصولاً ما دو تا داریم <div> عناصر در والدین <div> (به خاطر سادگی) – یکی است loader-container و دومی است 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;

تا کنون، ما فقط ایجاد کرده ایم <div> برای لودر ما حال ، بیایید ببینیم که چگونه می توانیم آن را اضافه کنیم و وقتی برخی از محتوا بارهای می دهند ، آن را تحریک کنیم.

توجه داشته باشید: می توانید بررسی کنید این مخزن و در صورت نیاز هنگام خواندن این راهنما ، کد را بررسی کنید.

استفاده از React Spinner در برنامه ما

react-spinner مجموعه ای از بسیاری از اسپینرها است که می توانیم در برنامه های React خود از آن استفاده کنیم. برای استفاده از React Spinner ، ابتدا باید با اجرای هر یک از دستور زیر ، کتابخانه را در فهرست پروژه خود نصب کنیم:

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

وقتی این کار انجام شد، اکنون می توانیم import لودر خاصی که می خواهیم از آن استفاده کنیم (در این حالت ، a ClipLoader) و یک ظاهر طراحی مانند اندازه و رنگ را تنظیم کنید:

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 کتابخانه از ویژگی های مفید زیادی برخوردار است ، به عنوان مثال ، ما می توانیم از آن برای رسیدگی به بارگیری بدون استفاده از اپراتورهای سه گانه استفاده کنیم:

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

به جای استفاده از اپراتور سه گانه برای نمایش محتوا مبتنی بر روی ارزش loadingInProgress متغیر، ما به سادگی استفاده کرده ایم loading={loadingInProgress} بجای.

ما همچنین می توانیم CSS مورد استفاده برای کنترل را تغییر دهیم spinner-icon با استفاده از یک override صفت:

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;

توجه داشته باشید: ما می توانیم در مورد بیشتر بخوانید react-spinner در مستندات، جایی که می توانیم لیستی از گناهکاران موجود را نیز مشاهده کنیم.

نتیجه

در این راهنمای کوتاه ، ما نگاهی به روش استفاده شما انداخته ایم react-spinners برای اضافه کردن یک اسپینر بارگذاری به یک عنصر در React.

(tagstotranslate)# JavaScript

منتشر شده در 1403-01-08 10:07:02

امتیاز شما به این مطلب