react content loader
v7.0.2
Composant alimenté par SVG pour créer facilement des charges d'espace réservée (comme le chargement des cartes de Facebook).
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 de JSdelivr
Il existe deux façons de l'utiliser:
1. Presets, voir les exemples:
import ContentLoader , { Facebook } from 'react-content-loader'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Mode personnalisé, voir l'outil en ligne
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 >
)Toujours pas clair? Jetez un œil à cet exemple de travail sur codesandbox.io ou essayez la démo modifiable des composants et installez-le à partir de bit.dev
react-content-loader peut être utilisé avec React Native de la même manière que la version Web avec la même importation:
1. Presets, voir les exemples:
import ContentLoader , { Facebook } from 'react-content-loader/native'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Mode personnalisé
Pour créer des chargeurs personnalisés, il existe une différence importante: car React Native n'a pas de module natif pour les composants SVG, il est nécessaire d'importer les formes à partir de React-Native-SVG ou d'utiliser l'exportation nommée et le cercle de 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 >
) Nom et type d'accessoire | Environnement | Description |
|---|---|---|
animate?: booleanPar défaut est true | Réagir DOM React natif | Opt-out des animations avec false |
title?: stringLoading... | Réagir DOM uniquement | Il est utilisé pour décrire de quel élément il s'agit. Utilisez '' (chaîne vide) pour supprimer. |
baseUrl?: stringPar défaut est une chaîne vide | Réagir DOM uniquement | Requis si vous utilisez <base url="/" /> document <head/> .Cet accessoire est utilisé comme: <ContentLoader baseUrl={window.location.pathname} /> qui remplira l'attribut SVG avec le chemin relatif. Lié # 93. |
speed?: numberPar défaut est 1.2 | Réagir DOM React natif | Vitesse d'animation en secondes. |
viewBox?: stringPar défaut est undefined | Réagir DOM React natif | Utilisez des accessoires ViewBox pour définir une valeur ViewBox personnalisée, Pour plus d'informations sur la façon de l'utiliser, Lisez l'article comment évoluer SVG. |
gradientRatio?: numberPar défaut est 1.2 | Réagir DOM uniquement | Largeur du gradient animé comme fraction de la largeur de la boîte de vue. |
rtl?: booleanPar défaut est false | Réagir DOM React natif | Contenu droit à gauche. |
backgroundColor?: stringPar défaut est #f5f6f7 | Réagir DOM React natif | Utilisé comme fond d'animation. |
foregroundColor?: stringPar défaut à #eee | Réagir DOM React natif | Utilisé comme premier plan d'animation. |
backgroundOpacity?: numberPar défaut est 1 | Réagir DOM React natif | Opacité d'arrière-plan (0 = transparent, 1 = opaque) utilisé pour résoudre un problème dans Safari |
foregroundOpacity?: numberPar défaut est 1 | Réagir DOM React natif | Opacité de l'animation (0 = transparent, 1 = opaque) utilisé pour résoudre un problème dans Safari |
style?: React.CSSPropertiesPar défaut est {} | Réagir DOM uniquement | |
uniqueKey?: stringPar défaut est un ID unique aléatoire | Réagir DOM uniquement | Utilisez la même valeur de la touche Prop, Cela résoudra l'incohérence sur le SSR, voir plus ici. |
beforeMask?: JSX.ElementPar défaut est nul | Réagir DOM React natif | Définissez les formes personnalisées avant le contenu, Voir plus ici. |
Voir toutes les options en direct
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 /> 
Pour le mode personnalisé, utilisez l'outil en ligne.
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 >
) 
Afin d'éviter un comportement inattendu, le package n'a pas de paramètres d'opinion. Donc, s'il doit être réactif, gardez à l'esprit que la sortie du package est un SVG ordinaire, il a donc juste besoin des mêmes attributs pour devenir un SVG régulier, ce qui signifie:
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => (
< Code
width = { 100 }
height = { 100 }
viewBox = "0 0 100 100"
style = { { width : '100%' } }
/>
) Comme le composant principal génère des valeurs aléatoires pour correspondre à l'ID de l'élément SVG avec un style d'arrière-plan, il peut rencontrer des erreurs inattendues et un avertissement inégalé sur le rendu, une fois que la valeur aléatoire de l'ID sera générée deux fois, dans le cas de SSR: serveur et client; ou en cas de test d'instantané: lors de la première correspondance et relancez le test.
Pour le réparer, définissez l'hélice uniqueKey , alors l'ID ne sera plus aléatoire:
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> Lors de l'utilisation rgba comme valeur backgroundColor ou foregroundColor , Safari ne respecte pas le canal alpha, ce qui signifie que la couleur sera opaque. Pour éviter cela, au lieu d'utiliser une valeur rgba pour backgroundColor / foregroundColor , utilisez l'équivalent rgb et déplacez la valeur du canal alpha vers les accessoires 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 } >
L'utilisation de la balise de base sur une page qui contient des éléments SVG ne parvient pas à rendre et cela ressemble à une boîte noire. Retirez simplement la balise de base-HREF du <head /> et le problème a été résolu.
Voir: # 93/109
Les anciens navigateurs ne prennent pas en charge l'animation dans SVG (liste de compatibilité), et si votre projet doit prendre en charge, c'est-à-dire pour des exemples, voici quelques façons de s'assurer que le navigateur prend en charge SVG Animate:
window.SVGAnimateElementdocument.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")Fourk le repo puis le cloner
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ npm i : installer les dépendances;
$ npm run build : Build to Production;
$ npm run dev : Exécutez le livre de contes pour voir vos modifications;
$ npm run test : Exécutez tous les tests: Type Vérification, tests unitaires sur le Web et le natif;
$ npm run test:watch : Watch Unit Tests;
Comme React Native ne prend pas en charge les liens symboliques (pour lier la dépendance à un autre dossier) et comme il n'y a pas de terrain de jeu pour vérifier vos contributions (comme le livre de contes), cette stratégie est recommandée pour exécuter le projet localement:
yarn add react-content-loader react-native-svgreact-content-loader au projet juste cloné, comme: import ContentLoader, { Rect, Circle } from './react-content-loader/native' Les messages de validation doivent suivre la convention des messages de validation afin que les changelogs puissent être générés automatiquement par cela. Les messages de validation sont validés automatiquement lors de la validation. Si vous n'êtes pas familier avec la convention de message de validation, vous pouvez utiliser Yarn Commit (ou npm run commit ) au lieu de Git Commit, qui fournit une CLI interactive pour générer des messages de validation appropriés.
Mit
