रिएक्ट-स्पिनर के साथ रिएक्ट में लोडिंग एनिमेशन कैसे बनाएं

प्लेटो द्वारा पुनर्प्रकाशित

अनुयायियों: 0

परिचय

रिएक्ट एप्लिकेशन बनाते समय जो बाहरी स्रोतों से सामग्री प्राप्त करते हैं जो लोड होने में कुछ समय लेते हैं, यह हमेशा एक अच्छा विचार है कि उपयोगकर्ताओं को आकर्षित करके और लोडर के साथ उनका ध्यान रखते हुए एक सुखद उपयोगकर्ता अनुभव प्रदान करें, क्योंकि इससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि क्या हो रहा है। उन्हें अटकलें लगाने के लिए छोड़ने की तुलना में।

इस गाइड में, हम सीखेंगे कि किसी एप्लिकेशन को लोड करते समय और बाहरी स्रोतों से सामग्री प्राप्त करते समय लोडर एनीमेशन कैसे प्रदर्शित करें, इसका उपयोग करके react-spinners पुस्तकालय।

इसके लिए - हम एक छोटा एप्लिकेशन तैयार करेंगे जो उद्धरण प्राप्त करते समय लोडिंग स्क्रीन के साथ उद्धरण प्राप्त करेगा:

यदि आप शुरू से स्पिनर बनाने के बारे में अधिक जानना चाहते हैं, तो हमारा पढ़ें "स्क्रैच से प्रतिक्रिया में लोडिंग एनिमेशन कैसे बनाएं"!

एक नमूना प्रतिक्रिया ऐप बनाना

आइए हमारे रिएक्ट मार्कअप को देखकर शुरू करें। मूल रूप से, हमारे पास दो <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;

अभी तक, हमने केवल a . बनाया है <div> हमारे लोडर के लिए। अब, देखते हैं कि हम इसे कैसे जोड़ सकते हैं और कुछ सामग्री लोड होने पर इसे ट्रिगर कर सकते हैं।

नोट: तुम बाहर की जाँच कर सकते हैं यह भंडार है और इस गाइड को पढ़ते समय यदि आवश्यक हो तो कोड को क्रॉस-चेक करें।

हमारे आवेदन में प्रतिक्रिया स्पिनरों का उपयोग करना

react-spinner कई स्पिनरों का एक संग्रह है जिसका उपयोग हम अपने रिएक्ट अनुप्रयोगों में कर सकते हैं। रिएक्ट स्पिनर का उपयोग करने के लिए, हमें पहले निम्न में से किसी भी कमांड को चलाकर अपनी परियोजना की निर्देशिका में पुस्तकालय स्थापित करना होगा:

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

एक बार ऐसा करने के बाद, हम अब उस विशेष लोडर को आयात कर सकते हैं जिसका हम उपयोग करना चाहते हैं (इस मामले में, 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;

RSI 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 रिएक्ट में किसी तत्व में लोडिंग स्पिनर जोड़ने के लिए।

समय टिकट: 7 जून 2022