react-loader-spinnerBu makale, paketle ilgili basit bir eğitimdir . Tepki projelerinize bu dönen veya herhangi bir yükleyici türünü eklemek için kullanabilirsiniz.

Kullanıcıya bazı verilerin eşzamansız olarak getirildiğini bildirmek için çoğunlukla yükleyicileri kullanırız. Bunu tepki olarak uygulayacak birçok kütüphane var, hatta sıfırdan kendiniz bile yazabilirsiniz, ancak react-loader-spinnerbence uygulanması en kolay olanlardan biri. Onu kullanmayı gerçekten çok seviyorum.

1. Kurulum

Basit. Paket yöneticinize bağlı olarak aşağıdakilerden herhangi birini çalıştırın.

npm install --save react-loader-spinner

VEYA

yarn add react-loader-spinner

2. Kullanım

"Puff" döndürücüyü uygulamak için aşağıdaki kodu eklemeniz yeterli

Bu kodu eklemek size böyle bir döndürücü verecektir. Verilen “ puff ” dışında birçok başka tipte eğirici/yükleyici vardır .

visibleÖzniteliği , gereksinimlerinize göre döndürücüyü başlatmak ve durdurmak için trueveya olarak ayarlayabilirsiniz .false

Döndürücüyü değiştiren basit bir düğme örneği. Bunu uygulamak için bir kanca kullandım.

Bu kod aşağıdakileri oluşturacaktır ve düğmeyi döndürücünün görünürlüğünü değiştirmek için kullanabiliriz…

3. Diğer Yükleyiciler

react-loader-spinnerPakette birçok başka tasarım var . Aşağıdaki hikaye kitabı bağlantısından canlı olarak görüntüleyebilirsiniz.

İşte en sevdiklerimden bazıları

type="Plane"

type="BallTriangle"

type="Audio"

type="TailSpin"

GitHub ve NPM Bağlantısı

Bizi Twitter ve Facebook ve Instagram 'da takip edin ve Facebook ve Linkedin Gruplarımıza katılın .

Topluluğumuza katılmak için Slack ekip sohbeti ️ haftalık Faun konularımızı okuyun ️ ve toplulukla bağlantı kurun buraya tıklayın⬇

Bu gönderi yardımcı olduysa, lütfen yazara desteğinizi göstermek için aşağıdaki alkış düğmesine birkaç kez tıklayın! ⬇