react content loader
v7.0.2
SVG-betriebene Komponente, um einfach Platzhalterladungen zu erstellen (wie das Laden von Facebook-Karten).
npm i react-content-loader --saveyarn add react-content-loadernpm i react-content-loader react-native-svg --saveyarn add react-content-loader react-native-svgCDN von Jsdelivr
Es gibt zwei Möglichkeiten, es zu verwenden:
1. Voreinstellungen siehe Beispiele:
import ContentLoader , { Facebook } from 'react-content-loader'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Benutzerdefinierter Modus finden Sie im Online -Tool
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 >
)Immer noch nicht klar? Schauen Sie sich dieses funktionierende Beispiel bei codesandbox.io an oder probieren Sie die Komponenten.
react-content-loader kann mit React Native genauso verwendet werden wie die Webversion mit demselben Import:
1. Voreinstellungen siehe Beispiele:
import ContentLoader , { Facebook } from 'react-content-loader/native'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. benutzerdefinierter Modus
Um benutzerdefinierte Lader zu erstellen, gibt es einen wichtigen Unterschied: Da React Native kein nationales Modul für SVG-Komponenten hat, ist es erforderlich, die Formen aus dem React-nativen-SVG zu importieren oder das benannte Export-Rechtex und den Kreis von react-content-loader Import zu verwenden:
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 >
) Requisitenname und Typ | Umfeld | Beschreibung |
|---|---|---|
animate?: booleanStandardmäßig true | Reagieren dom Reagieren Sie nativ | Animationen mit false abmelden |
title?: stringStandardeinstellungen zum Loading... | Nur dom reagieren | Es wird verwendet, um zu beschreiben, welches Element es ist. Verwenden Sie '' (leere Zeichenfolge), um zu entfernen. |
baseUrl?: stringStandardeinstellungen zu einer leeren Zeichenfolge | Nur dom reagieren | Erforderlich, wenn Sie <base url="/" /> document <head/> verwenden.Diese Requisite wird häufig verwendet als: <ContentLoader baseUrl={window.location.pathname} /> das das SVG -Attribut mit dem relativen Pfad füllt. Verwandte #93. |
speed?: numberStandardeinstellung auf 1.2 | Reagieren dom Reagieren Sie nativ | Animationsgeschwindigkeit in Sekunden. |
viewBox?: stringStandardeinstellungen zu undefined | Reagieren dom Reagieren Sie nativ | Verwenden Sie ViewBox -Requisiten, um einen benutzerdefinierten Ansichtsbox -Wert festzulegen. Weitere Informationen zum Gebrauch, wie Sie es verwenden können, Lesen Sie den Artikel, wie man SVG skaliert. |
gradientRatio?: numberStandardeinstellung auf 1.2 | Nur dom reagieren | Breite des animierten Gradienten als Bruchteil der Breite der Ansichtsbox. |
rtl?: booleanStandardmäßig false | Reagieren dom Reagieren Sie nativ | Inhalt von rechts nach links. |
backgroundColor?: stringStandardeinstellungen zu #f5f6f7 | Reagieren dom Reagieren Sie nativ | Verwendet als Hintergrund der Animation. |
foregroundColor?: stringStandardeinstellungen zu #eee | Reagieren dom Reagieren Sie nativ | Verwendet als Vordergrund der Animation. |
backgroundOpacity?: numberStandardmäßig 1 | Reagieren dom Reagieren Sie nativ | Hintergrundockigkeit (0 = transparent, 1 = undurchsichtig) Wird verwendet, um ein Problem in Safari zu lösen |
foregroundOpacity?: numberStandardmäßig 1 | Reagieren dom Reagieren Sie nativ | Opazität der Animation (0 = transparent, 1 = undurchsichtig) Wird verwendet, um ein Problem in Safari zu lösen |
style?: React.CSSPropertiesStandardmäßig {} | Nur dom reagieren | |
uniqueKey?: stringStandardeinstellungen zur zufälligen eindeutigen ID | Nur dom reagieren | Verwenden Sie den gleichen Wert des Propetschlüssels, Das wird Inkonsistenz auf der SSR lösen, siehe mehr hier. |
beforeMask?: JSX.ElementStandardmäßig null | Reagieren dom Reagieren Sie nativ | Definieren Sie benutzerdefinierte Formen vor dem Inhalt, Weitere Informationen finden Sie hier. |
Sehen Sie alle Optionen live
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook /> 
import { Instagram } from 'react-content-loader'
const MyInstagramLoader = ( ) => < Instagram /> 
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => < Code /> 
import { List } from 'react-content-loader'
const MyListLoader = ( ) => < List /> 
import { BulletList } from 'react-content-loader'
const MyBulletListLoader = ( ) => < BulletList /> 
Verwenden Sie für den benutzerdefinierten Modus das Online -Tool.
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 >
) 
Um unerwartetes Verhalten zu vermeiden, hat das Paket keine einstelligen Einstellungen. Wenn es also reagieren muss, denken Sie daran, dass die Ausgabe des Pakets ein reguläres SVG ist. Daher benötigt es nur die gleichen Attribute, um eine regelmäßige SVG -Reaktion zu werden, was bedeutet:
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => (
< Code
width = { 100 }
height = { 100 }
viewBox = "0 0 100 100"
style = { { width : '100%' } }
/>
) Da die Hauptkomponente zufällige Werte generiert, die mit der ID des SVG -Elements mit dem Hintergrundstil übereinstimmen, kann sie auf unerwartete Fehler und die unerreichte Warnung beim Rendern stoßen, sobald der zufällige Wert der ID bei SSR: Server und Client zweimal generiert wird. oder im Falle eines Snapshot-Tests: Bei der ersten Übereinstimmung und erneutem Durchführen des Tests.
Um es zu beheben, setzen Sie den Requisite uniqueKey , dann ist die ID nicht mehr zufällig:
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> Bei der Verwendung von rgba als backgroundColor oder foregroundColor respektiert Safari den Alpha -Kanal nicht, was bedeutet, dass die Farbe undurchsichtig ist. Um dies zu verhindern, verwenden Sie anstatt einen rgba -Wert für backgroundColor / foregroundColor zu verwenden, das rgb -Äquivalent und verschieben Sie den Alpha -Kanalwert auf die Requisiten 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 } >
Die Verwendung des Basistags auf einer Seite, die SVG -Elemente enthält, kann nicht rendern und es sieht aus wie eine schwarze Box. Entfernen Sie einfach das Base-Href -Tag aus dem <head /> und das Problem wurde gelöst.
Siehe: #93 /109
Alte Browser unterstützen keine Animation in SVG (Kompatibilitätsliste). Wenn Ihr Projekt z. B. Beispiele für Beispiele, finden Sie hier ein paar Möglichkeiten, um sicherzustellen, dass der Browser SVG animate unterstützt:
window.SVGAnimateElementdocument.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")Gib das Repo und klonen Sie es dann
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ npm i : Installieren Sie die Abhängigkeiten;
$ npm run build : Build to Production;
$ npm run dev : Rennen Sie das Storybook, um Ihre Änderungen zu sehen.
$ npm run test : Alle Tests ausführen: Geben Sie Überprüfung, Unit -Tests im Web und nativ aus;
$ npm run test:watch : Watch Unit -Tests;
Da React Native keine symbolischen Links unterstützt (um die Abhängigkeit mit einem anderen Ordner zu verknüpfen), gibt es, da es keinen Spielplatz gibt, um Ihre Beiträge zu überprüfen (wie das Storybook), eine empfohlene Strategie, um das Projekt lokal auszuführen:
yarn add react-content-loader react-native-svgreact-content-loader auf das gerade klonierte Projekt wie: import ContentLoader, { Rect, Circle } from './react-content-loader/native' Commit -Nachrichten sollten der Komitee -Nachrichtenkonvention folgen. Dadurch können ChangeLogs automatisch generiert werden. Commit -Nachrichten werden bei Commit automatisch validiert. Wenn Sie mit der Konvention von Commit Message nicht vertraut sind, können Sie anstelle von GIT -Commits Garn Commit (oder npm run commit ) verwenden, das eine interaktive CLI für die Generierung ordnungsgemäßer Festschreibungsnachrichten bietet.
MIT
