Jak stworzyć proste programy ładujące w React
Ten artykuł jest prostym samouczkiem dotyczącym react-loader-spinnerpakietu. Możesz go użyć do dodania tych wirujących lub dowolnego typu ładującego w swoich projektach reagowania.
Najczęściej używamy programów ładujących, aby zasygnalizować użytkownikowi, że niektóre dane są pobierane asynchronicznie. Jest wiele bibliotek, które mogą to zaimplementować w reakcji, możesz nawet napisać react-loader-spinnerwłasną od podstaw, ale moim zdaniem jest to jedna z najłatwiejszych do wdrożenia. Uwielbiam go używać.
1. Instalacja
To proste. Uruchom dowolną z poniższych w zależności od menedżera pakietów.
npm install --save react-loader-spinner
LUB
yarn add react-loader-spinner
2. Użytkowanie
Po prostu dodaj następujący kod, aby zaimplementować pokrętło „puff”
Dodanie tego kodu da ci taki spinner. Istnieje wiele innych typów błystek / ładowarek innych niż podana „ zaciągnięta ”.
Możesz ustawić visibleatrybut na truelub falsedo uruchamiania i zatrzymywania pokrętła zgodnie z własnymi wymaganiami.
Oto prosty przykład przycisku przełączającego pokrętło. Użyłem haka, aby to zaimplementować.
Ten kod wyrenderuje następujący obraz i możemy użyć przycisku, aby przełączyć widoczność pokrętła…
3. Inne ładowarki
W react-loader-spinnerpakiecie dostępnych jest wiele innych wzorów . Możesz je oglądać na żywo pod następującym linkiem do książeczki
Oto kilka moich ulubionych
type="Plane"
type="BallTriangle"
type="Audio"
type="TailSpin"
GitHub i NPM Link
Dołącz do nas na Twitterze 🐦 i Facebooku 👥 i Instagram 📷 i dołącz do naszego Facebook i Linkedin Grupy 💬 .
Aby dołączyć do naszej społeczności czat zespołu Slack 🗣️ przeczytaj nasze cotygodniowe tematy Faun 🗞️ i połącz się ze społecznością 📣 kliknij tutaj⬇
Jeśli ten post był pomocny, kliknij kilka razy przycisk „klaszcz 👏” poniżej, aby wyrazić swoje poparcie dla autora! ⬇
Suggested posts
Unikanie niszczycielskich konsekwencji udaru mózgu: nauka z rodzinnej podróży.
Wstęp Udar to nagły przypadek medyczny, który może dotknąć każdego w dowolnym momencie. Występuje, gdy przepływ krwi do części mózgu zostaje zakłócony, co prowadzi do nagłej utraty funkcji mózgu.
Jest — potężny framework do testowania JavaScript
Testowanie jest istotną częścią tworzenia oprogramowania. Zapewnia, że kod jest niezawodny, działa zgodnie z oczekiwaniami i zmniejsza prawdopodobieństwo błędów.
Related posts
Niebezpieczne rozmowy
Jeśli chcemy dalej prosperować na tej planecie, będziemy musieli prowadzić niebezpieczne rozmowy. Takie, które rzucają wyzwanie temu, co zrobiliśmy, co robimy i co obecnie zamierzamy robić (lub planujemy robić).
Dwa lata projektowania – dobre, złe i brzydkie…
„Hej, Siri, zagraj w Me Dive autorstwa Olivii Dean”. W maju 2021 rozpocząłem staż w Future Academy Africa w Akure w Nigerii.
Kłamstwo kowbojskie
Jak megakorporacje sprzedały Amerykanom mocne kłamstwo
Jest wspaniale złoty poranek na falistych wzgórzach zachodu, gdy pierwsze promienie słońca oświetlają oszronioną trawę na równinach. Stado spokojnego bydła rasy Angus, czarnego jak smoła i masywne, rysuje się na tle wschodu słońca, gdy zmierza utartym szlakiem do miejsca, które wszyscy dobrze znają; bar śniadaniowy.
Co możesz zrobić w swoim okresie oczekiwania (czekając na wylądowanie Twoja pierwsza praca w technologii)
Przejście do nowej kariery może być niezwykle trudne, jeśli spróbujesz zrobić to sam. Ważne jest, aby znaleźć odpowiedzialnych partnerów, którzy są na tym samym poziomie uczenia się co ty, którzy mają podobne cele, wytrwałość i motywację.