react content loader
v7.0.2
Componente con SVG para crear fácilmente cargas de marcadores de posición (como la carga de las tarjetas 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
Hay dos formas de usarlo:
1. Presets, ver los ejemplos:
import ContentLoader , { Facebook } from 'react-content-loader'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Modo personalizado, consulte la herramienta en línea
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 >
)¿Todavía no está claro? Eche un vistazo a este ejemplo de trabajo en Codesandbox.io o pruebe los componentes de demostración editable e instálelo desde bit.dev
react-content-loader se puede usar con React Native de la misma manera que la versión web con la misma importación:
1. Presets, ver los ejemplos:
import ContentLoader , { Facebook } from 'react-content-loader/native'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Modo personalizado
Para crear cargadores personalizados, hay una diferencia importante: como React Native no tiene ningún módulo nativo para los componentes SVG, es necesario importar las formas de React-Native-Native-SVG o utilizar el RECT y el círculo de exportación nombrado de la importación 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 >
) Nombre y tipo de accesorio | Ambiente | Descripción |
|---|---|---|
animate?: booleanEl valor predeterminado es true | Reaccionar dom Reaccionar nativo | Opción de recepción de animaciones con false |
title?: stringEl valor predeterminado se Loading... | Reaccionar solo DOM | Se usa para describir qué elemento es. Use '' (cadena vacía) para eliminar. |
baseUrl?: stringPredeterminado a una cadena vacía | Reaccionar solo DOM | Requerido si está utilizando <base url="/" /> documento <head/> .Este accesorio se usa en común como: <ContentLoader baseUrl={window.location.pathname} /> que llenará el atributo SVG con la ruta relativa. Relacionado #93. |
speed?: numberEl valor predeterminado a 1.2 | Reaccionar dom Reaccionar nativo | Velocidad de animación en segundos. |
viewBox?: stringPredeterminado a undefined | Reaccionar dom Reaccionar nativo | Use los accesorios de ViewBox para establecer un valor de ViewBox personalizado, Para obtener más información sobre cómo usarlo, Lea el artículo Cómo escalar SVG. |
gradientRatio?: numberEl valor predeterminado a 1.2 | Reaccionar solo DOM | Ancho del gradiente animado como una fracción del ancho de la caja de la vista. |
rtl?: booleanEl valor predeterminado a false | Reaccionar dom Reaccionar nativo | Contenido derecho a izquierda. |
backgroundColor?: stringEl valor predeterminado es #f5f6f7 | Reaccionar dom Reaccionar nativo | Utilizado como fondo de animación. |
foregroundColor?: stringPredeterminado es #eee | Reaccionar dom Reaccionar nativo | Utilizado como el primer plano de la animación. |
backgroundOpacity?: numberPredeterminado a 1 | Reaccionar dom Reaccionar nativo | Opacidad de fondo (0 = transparente, 1 = opaco) Solía resolver un problema en Safari |
foregroundOpacity?: numberPredeterminado a 1 | Reaccionar dom Reaccionar nativo | Opacidad de animación (0 = Transparente, 1 = Opaco) Solía resolver un problema en Safari |
style?: React.CSSPropertiesEl valor predeterminado es {} | Reaccionar solo DOM | |
uniqueKey?: stringEl valor predeterminado a la identificación única aleatoria | Reaccionar solo DOM | Use el mismo valor de la tecla de proporción, Eso resolverá la inconsistencia en la SSR, ver más aquí. |
beforeMask?: JSX.ElementEl valor predeterminado a NULL | Reaccionar dom Reaccionar nativo | Definir formas personalizadas antes del contenido, Ver más aquí. |
Ver todas las opciones en vivo
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 /> 
Para el modo personalizado, use la herramienta en línea.
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 >
) 
Para evitar un comportamiento inesperado, el paquete no tiene configuraciones en opinión. Entonces, si necesita ser receptivo, tenga en cuenta que la salida del paquete es un SVG regular, por lo que solo necesita los mismos atributos para convertirse en un SVG regular receptivo, lo que significa:
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => (
< Code
width = { 100 }
height = { 100 }
viewBox = "0 0 100 100"
style = { { width : '100%' } }
/>
) Como el componente principal genera valores aleatorios para que coincida con la ID del elemento SVG con estilo de fondo, puede encontrar errores inesperados y una advertencia inigualable en Render, una vez que el valor aleatorio de ID se generará dos veces, en caso de SSR: servidor y cliente; o en el caso de la prueba de instantánea: en el primer partido y vuelva a ejecutar la prueba.
Para solucionarlo, configure el PROP uniqueKey , entonces la ID ya no será aleatoria:
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> Cuando se usa rgba como un valor backgroundColor o foregroundColor , Safari no respeta el canal alfa, lo que significa que el color será opaco. Para evitar esto, en lugar de usar un valor rgba para backgroundColor / foregroundColor , use el equivalente rgb y mueva el valor del canal alfa a los accesorios 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 } >
El uso de la etiqueta base en una página que contiene elementos SVG no puede renderizar y parece una caja negra. Simplemente elimine la etiqueta Base-HREF de la <head /> y el problema se ha resuelto.
Ver: #93/109
Los viejos navegadores no admiten la animación en SVG (lista de compatibilidad), y si su proyecto debe admitir IE, para ejemplos, aquí hay un par de formas de asegurarse de que el navegador admite SVG Animate:
window.SVGAnimateElementdocument.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")Bifurca el repositorio y luego clona
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ npm i : instalar las dependencias;
$ npm run build : Build to Production;
$ npm run dev : ejecute el libro de cuentos para ver sus cambios;
$ npm run test : ejecute todas las pruebas: comprobación de tipo, pruebas unitarias en la web y nativa;
$ npm run test:watch : Mire las pruebas unitarias;
Como React Native no admite enlaces simbólicos (para vincular la dependencia a otra carpeta) y como no hay un patio de recreo para verificar sus contribuciones (como el libro de cuentos), esta es una estrategia recomendada para ejecutar el proyecto localmente:
yarn add react-content-loader react-native-svgreact-content-loader al proyecto que acaba de clonarse, como: import ContentLoader, { Rect, Circle } from './react-content-loader/native' Los mensajes de confirmación deben seguir la convención de mensajes de confirmación, por lo que Changelogs podría generarse automáticamente por eso. Los mensajes de confirmación se validan automáticamente al confirmar. Si no está familiarizado con la convención de mensajes de confirmación, puede usar hilo Conjunto (o npm run commit ) en lugar de Git Commit, que proporciona una CLI interactiva para generar mensajes de confirmación adecuados.
MIT
