react content loader

Komponen bertenaga SVG untuk dengan mudah membuat pemuatan placeholder (seperti pemuatan kartu Facebook).

Fitur

• Dapat disesuaikan: Jangan ragu untuk mengubah warna, kecepatan, ukuran, dan bahkan RTL ;
• ? Plug and Play: Dengan banyak preset untuk digunakan, lihat contohnya;
• ✏️ DIY: Gunakan create-content-loader untuk membuat loader kustom Anda sendiri dengan mudah;
• React Native Support : API yang sama, seperti fitur kuat yang sama;
• ⚛️ Benar -benar ringan: kurang dari 2kB dan 0 dependensi untuk versi web;

Indeks

• Memulai
• Penggunaan
  • Warga asli
• Opsi
• Contoh
• Pemecahan masalah
• Paket serupa
• Perkembangan

Memulai

npm i react-content-loader --save

yarn add react-content-loader

Untuk Bereaksi Asli

npm i react-content-loader react-native-svg --save

yarn add react-content-loader react-native-svg

CDN dari jsdelivr

Penggunaan

Ada dua cara untuk menggunakannya:

1. Preset, lihat contohnya:

 import ContentLoader , { Facebook } from 'react-content-loader'

const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />

2. Mode Kustom, lihat Alat Online

 const MyLoader = ( ) => (
  < ContentLoader viewBox = "0 0 380 70" >
    { /* Only SVG shapes */ }    
    < rect x = "0" y = "0" rx = "5" ry = "5" width = "70" height = "70" />
    < rect x = "80" y = "17" rx = "4" ry = "4" width = "300" height = "13" />
    < rect x = "80" y = "40" rx = "3" ry = "3" width = "250" height = "10" />
  </ ContentLoader >
)

Masih belum jelas? Lihatlah contoh kerja ini di codesandbox.io atau coba demo yang dapat diedit secara langsung dan instal dari bit.dev

Warga asli

react-content-loader dapat digunakan dengan React Native dengan cara yang sama seperti versi web dengan impor yang sama:

1. Preset, lihat contohnya:

 import ContentLoader , { Facebook } from 'react-content-loader/native'

const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />

2. Mode Kustom

Untuk membuat loader khusus ada perbedaan penting: karena React Native tidak memiliki modul asli untuk komponen SVG, perlu untuk mengimpor bentuk dari react-native-SVG atau menggunakan ekspor bernama dan lingkaran dari impor react-content-loader :

 import ContentLoader , { Rect , Circle } from 'react-content-loader/native'

const MyLoader = ( ) => (
  < ContentLoader viewBox = "0 0 380 70" >
    < Circle cx = "30" cy = "30" r = "30" />
    < Rect x = "80" y = "17" rx = "4" ry = "4" width = "300" height = "13" />
    < Rect x = "80" y = "40" rx = "3" ry = "3" width = "250" height = "10" />
  </ ContentLoader >
) 

Opsi

Nama dan Jenis Prop	Lingkungan	Keterangan
animate?: boolean Default ke true	Bereaksi dom Bereaksi asli	Otong-keluar dari animasi dengan false
title?: string Default untuk Loading...	Reaksi dom saja	Ini digunakan untuk menggambarkan elemen apa itu. Gunakan '' (string kosong) untuk menghapus.
baseUrl?: string Default ke string kosong	Reaksi dom saja	Diperlukan jika Anda menggunakan <base url="/" /> dokumen <head/> . Prop ini umum digunakan sebagai: <ContentLoader baseUrl={window.location.pathname} /> yang akan mengisi atribut SVG dengan jalur relatif. Terkait #93.
speed?: number Default ke 1.2	Bereaksi dom Bereaksi asli	Kecepatan animasi dalam hitungan detik.
viewBox?: string Default untuk undefined	Bereaksi dom Bereaksi asli	Gunakan alat peraga viewbox untuk mengatur nilai viewbox khusus, Untuk informasi lebih lanjut tentang cara menggunakannya, Baca artikel bagaimana skala SVG.
gradientRatio?: number Default ke 1.2	Reaksi dom saja	Lebar gradien animasi sebagai sebagian kecil dari lebar kotak tampilan.
rtl?: boolean Default ke false	Bereaksi dom Bereaksi asli	Konten hak-ke kiri.
backgroundColor?: string Default ke #f5f6f7	Bereaksi dom Bereaksi asli	Digunakan sebagai latar belakang animasi.
foregroundColor?: string Default ke #eee	Bereaksi dom Bereaksi asli	Digunakan sebagai latar depan animasi.
backgroundOpacity?: number Default ke 1	Bereaksi dom Bereaksi asli	Latar belakang opacity (0 = transparan, 1 = buram) Digunakan untuk memecahkan masalah di Safari
foregroundOpacity?: number Default ke 1	Bereaksi dom Bereaksi asli	Animasi Opacity (0 = Transparan, 1 = buram) Digunakan untuk memecahkan masalah di Safari
style?: React.CSSProperties Default ke {}	Reaksi dom saja
uniqueKey?: string Default ke ID unik acak	Reaksi dom saja	Gunakan nilai tombol prop yang sama, Itu akan menyelesaikan ketidakkonsistenan pada SSR, lihat lebih banyak di sini.
beforeMask?: JSX.Element Default ke null	Bereaksi dom Bereaksi asli	Tentukan bentuk khusus sebelum konten, Lihat lebih banyak di sini.

Lihat semua opsi langsung

Contoh

Gaya Facebook

 import { Facebook } from 'react-content-loader'

const MyFacebookLoader = ( ) => < Facebook /> 

Gaya Instagram

 import { Instagram } from 'react-content-loader'

const MyInstagramLoader = ( ) => < Instagram /> 

Gaya kode

 import { Code } from 'react-content-loader'

const MyCodeLoader = ( ) => < Code /> 

Daftar Gaya

 import { List } from 'react-content-loader'

const MyListLoader = ( ) => < List /> 

Gaya daftar peluru

 import { BulletList } from 'react-content-loader'

const MyBulletListLoader = ( ) => < BulletList /> 

Gaya khusus

Untuk mode khusus, gunakan alat online.

 const MyLoader = ( ) => (
  < ContentLoader
    height = { 140 }
    speed = { 1 }
    backgroundColor = { '#333' }
    foregroundColor = { '#999' }
    viewBox = "0 0 380 70"
  >
    { /* Only SVG shapes */ }
    < rect x = "0" y = "0" rx = "5" ry = "5" width = "70" height = "70" />
    < rect x = "80" y = "17" rx = "4" ry = "4" width = "300" height = "13" />
    < rect x = "80" y = "40" rx = "3" ry = "3" width = "250" height = "10" />
  </ ContentLoader >
) 

Pemecahan masalah

Responsif - Versi Seluler

Untuk menghindari perilaku yang tidak terduga, paket itu tidak memiliki pengaturan pendapat. Jadi jika perlu responsif, ingatlah bahwa output paket adalah SVG biasa, jadi hanya perlu atribut yang sama untuk menjadi SVG biasa responsif, yang berarti:

 import { Code } from 'react-content-loader'

const MyCodeLoader = ( ) => (
  < Code
    width = { 100 }
    height = { 100 }
    viewBox = "0 0 100 100"
    style = { { width : '100%' } }
  />
) 

Server -Side Rendering (SSR) - Cocokkan Snapshot

Karena komponen utama menghasilkan nilai acak agar sesuai dengan ID elemen SVG dengan gaya latar belakang, ia dapat mengalami kesalahan yang tidak terduga dan peringatan yang tidak cocok pada render, setelah nilai acak ID akan dihasilkan dua kali, dalam kasus SSR: server dan klien; atau dalam kasus tes snapshot: pada pertandingan pertama dan menjalankan kembali tes.

Untuk memperbaikinya, atur prop uniqueKey , maka ID tidak akan acak lagi:

 import { Facebook } from 'react-content-loader'

const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> 

Alpha tidak berfungsi: safari / ios

Saat menggunakan rgba sebagai nilai backgroundColor atau foregroundColor , Safari tidak menghormati saluran alfa, yang berarti bahwa warnanya akan buram. Untuk mencegah hal ini, alih -alih menggunakan nilai rgba untuk backgroundColor / foregroundColor , gunakan setara rgb dan pindahkan nilai saluran Alpha ke properti backgroundOpacity / foregroundOpacity .

 { /* Opaque color in Safari and iOS */ }
< ContentLoader
  backgroundColor = "rgba(0,0,0,0.06)"
  foregroundColor = "rgba(0,0,0,0.12)" >


{ / _ Semi-transparent color in Safari and iOS _ / }
< ContentLoader
    backgroundColor = "rgb(0,0,0)"
    foregroundColor = "rgb(0,0,0)"
    backgroundOpacity = { 0.06 }
    foregroundOpacity = { 0.12 } >

Kotak hitam di safari / iOS (lagi)

Menggunakan tag dasar pada halaman yang berisi elemen SVG gagal dirender dan terlihat seperti kotak hitam. Cukup lepaskan tag base-href dari <head /> dan masalah telah diselesaikan.

Lihat: #93/109

Browser mendukung SVG-animate

Browser lama tidak mendukung animasi di SVG (daftar kompatibilitas), dan jika proyek Anda harus mendukung, misalnya, berikut adalah beberapa cara untuk memastikan bahwa browser mendukung SVG Animate:

• window.SVGAnimateElement
• document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")
• Atau bahkan gunakan https://modernizr.com/

Paket serupa

• React Native: RN-placeHolder, react-native-SVG-animated-linear-gradient;
• Preact;
• Vue.js: vue-content-loading, vue-content-loader;
• Angular: NGX-Content-Loading, NGX-Content-Loader.

---

Perkembangan

Garpu repo dan kemudian kloning

 $ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader

$ npm i : instal dependensi;

$ npm run build : Build to Production;

$ npm run dev : Jalankan buku cerita untuk melihat perubahan Anda;

$ npm run test : Jalankan semua tes: Ketik Pemeriksaan, Tes Unit di Web dan Asli;

$ npm run test:watch : Tes unit tonton;

Bereaksi asli

Karena React Native tidak mendukung tautan simbolik (untuk menghubungkan ketergantungan ke folder lain) dan karena tidak ada taman bermain untuk memeriksa kontribusi Anda (seperti buku cerita), ini direkomendasikan strategi untuk menjalankan proyek secara lokal:

1. Buat Native React baru dari awal, baik metro atau create-react-native-app;
2. Instal Ketergantungan ke Proyek Root Anda: yarn add react-content-loader react-native-svg
3. Buka proyek yang baru saja dibuat dan klon repositori ini di sana;
4. Buat komponen pemuatan Anda dan arahkan react-content-loader ke proyek yang baru saja dikloning, seperti: import ContentLoader, { Rect, Circle } from './react-content-loader/native'

Melakukan pesan

Pesan komit harus mengikuti konvensi pesan komit sehingga, changelogs dapat dihasilkan secara otomatis oleh itu. Pesan komit divalidasi secara otomatis setelah komit. Jika Anda tidak terbiasa dengan Konvensi Pesan Komit, Anda dapat menggunakan YARN Commit (atau npm run commit ) alih -alih Git Commit, yang menyediakan CLI interaktif untuk menghasilkan pesan komit yang tepat.

Lisensi

Mit