react content loader

Componente movido a SVG para criar facilmente cargas de espaço reservado (como o carregamento de cartões do Facebook).

Características

• Customizável: sinta -se à vontade para alterar as cores, velocidade, tamanhos e até RTL ;
• ? Plug and Play: com muitas predefinições para usar, consulte os exemplos;
• ✏️ DIY: use o carregador Criar-Content para criar seus próprios carregadores personalizados facilmente;
• Reaja o suporte nativo : a mesma API, como os mesmos recursos poderosos;
• ⚛️ Realmente leve: menos de 2kb e 0 dependências para a versão da web;

Índice

• Começando
• Uso
  • Nativo
• Opções
• Exemplos
• Solução de problemas
• Pacotes semelhantes
• Desenvolvimento

Começando

npm i react-content-loader --save

yarn add react-content-loader

Para react nativo

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

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

CDN de JSDelivr

Uso

Existem duas maneiras de usá -lo:

1. Predefinições, consulte os exemplos:

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

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

2. Modo personalizado, consulte a ferramenta 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 >
)

Ainda não está claro? Dê uma olhada neste exemplo de funcionamento no codesandbox.io ou tente os componentes editáveis ​​demonstrando prática e instale-o no bit.dev

Nativo

react-content-loader pode ser usado com o React Native da mesma maneira que a versão da Web com a mesma importação:

1. Predefinições, consulte os exemplos:

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

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

2. Modo personalizado

Para criar carregadores personalizados, existe uma diferença importante: como o React Native não possui nenhum módulo nativo para componentes SVG, é necessário importar as formas do React-native-SVG ou usar o Rect de Exportação e o Circle 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 >
) 

Opções

Nome e tipo de suporte	Ambiente	Descrição
animate?: boolean Padrões para true	Reaja dom Reagir nativo	Opta-não de animações com false
title?: string Padrões de Loading...	Apenas reaja DOM	É usado para descrever qual elemento é. Use '' (string vazia) para remover.
baseUrl?: string Padrões para uma corda vazia	Apenas reaja DOM	Necessário se você estiver usando <base url="/" /> documento <head/> . Este suporte é comum usado como: <ContentLoader baseUrl={window.location.pathname} /> que preencherá o atributo SVG com o caminho relativo. Relacionado #93.
speed?: number Padrões para 1.2	Reaja dom Reagir nativo	Velocidade de animação em segundos.
viewBox?: string Padrão para undefined	Reaja dom Reagir nativo	Use o ViewBox adereços para definir um valor de viewbox personalizado, Para mais informações sobre como usá -lo, Leia o artigo como escalar SVG.
gradientRatio?: number Padrões para 1.2	Apenas reaja DOM	Largura do gradiente animado como uma fração da largura da caixa de exibição.
rtl?: boolean Padrões para false	Reaja dom Reagir nativo	Conteúdo direito para a esquerda.
backgroundColor?: string Padrões para #f5f6f7	Reaja dom Reagir nativo	Usado como fundo de animação.
foregroundColor?: string Padrão para #eee	Reaja dom Reagir nativo	Usado como primeiro plano da animação.
backgroundOpacity?: number Padrões para 1	Reaja dom Reagir nativo	Opacidade de fundo (0 = transparente, 1 = opaca) usado para resolver um problema no Safari
foregroundOpacity?: number Padrões para 1	Reaja dom Reagir nativo	Opacidade de animação (0 = transparente, 1 = opaca) usado para resolver um problema no Safari
style?: React.CSSProperties Padrões para {}	Apenas reaja DOM
uniqueKey?: string Padrões para ID exclusivo aleatório	Apenas reaja DOM	Use o mesmo valor da chave do suporte, Isso resolverá inconsistência no SSR, veja mais aqui.
beforeMask?: JSX.Element Padrões para NULL	Reaja dom Reagir nativo	Defina formas personalizadas antes do conteúdo, Veja mais aqui.

Veja todas as opções ao vivo

Exemplos

Estilo do Facebook

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

const MyFacebookLoader = ( ) => < Facebook /> 

Estilo do Instagram

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

const MyInstagramLoader = ( ) => < Instagram /> 

Estilo de código

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

const MyCodeLoader = ( ) => < Code /> 

Estilo de lista

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

const MyListLoader = ( ) => < List /> 

Estilo da lista de balas

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

const MyBulletListLoader = ( ) => < BulletList /> 

Estilo personalizado

Para o modo personalizado, use a ferramenta 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 >
) 

Solução de problemas

Responsivo - versão móvel

Para evitar comportamentos inesperados, o pacote não possui configurações de opinião. Portanto, se precisar ser responsivo, lembre -se de que a saída do pacote é um SVG regular, por isso precisa apenas dos mesmos atributos para se tornar um SVG regular, o que significa:

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

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

Renderização do lado do servidor (SSR) - Combine o instantâneo

Como o componente principal gera valores aleatórios para corresponder ao ID do elemento SVG com o estilo de fundo, ele pode encontrar erros inesperados e aviso incomparável na renderização, uma vez que o valor aleatório do ID será gerado duas vezes, no caso de SSR: servidor e cliente; ou em caso de teste de instantâneos: na primeira partida e execute novamente o teste.

Para corrigi -lo, defina o Prop uniqueKey , então o ID não será mais aleatório:

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

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

Alpha não está funcionando: Safari / iOS

Ao usar rgba como um valor backgroundColor ou foregroundColor , o Safari não respeita o canal alfa, o que significa que a cor será opaca. Para impedir isso, em vez de usar um valor rgba para backgroundColor / foregroundColor , use o equivalente rgb e mova o valor do canal alfa para os acessórios de base 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 } >

Black Box in Safari / iOS (novamente)

O uso da tag base em uma página que contém elementos SVG não renderiza e parece uma caixa preta. Basta remover a etiqueta base-href da <head /> e o problema foi resolvido.

Veja: #93/109

O navegador suporta SVG-Animate

Os navegadores antigos não suportam a animação no SVG (lista de compatibilidade) e, se o seu projeto deve apoiar o IE, por exemplo, aqui estão algumas maneiras de garantir que o navegador suporta o SVG Animate:

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

Pacotes semelhantes

• React nativo: RN-Place-tholdder, Gradiente Linear-Linear-SVG-SVG-SVG;
• Prega;
• Vue.js: carregamento de conteúdo de Vue, Vue-content-carregador;
• Angular: carregamento de conteúdo NGX, carregador NGX-Content.

---

Desenvolvimento

Bifurcar o repositório e depois cloná -lo

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

$ npm i : instale as dependências;

$ npm run build : Build to Production;

$ npm run dev : execute o livro de histórias para ver suas alterações;

$ npm run test : Execute todos os testes: verificação de tipo, testes de unidade na web e nativos;

$ npm run test:watch : Assista a testes de unidade;

Reagir nativo

Como o React Native não suporta links simbólicos (para vincular a dependência a outra pasta) e, como não há playground para verificar suas contribuições (como o Storybook), essa é a estratégia recomendada para executar o projeto localmente:

1. Crie um novo React Native a partir do zero, Metro ou Create-React-native-App;
2. Instale a dependência do seu projeto raiz: yarn add react-content-loader react-native-svg
3. Abra o projeto acabou de criar e clonar este repositório lá;
4. Crie seu componente de carregamento e aponte o react-content-loader para o projeto que acabou de clonado, como: import ContentLoader, { Rect, Circle } from './react-content-loader/native'

Cometer mensagens

As mensagens de comprometimento devem seguir a Convenção de Mensagens de Commit, para que os Changelogs possam ser gerados automaticamente com isso. As mensagens de confirmação são validadas automaticamente após o comprometimento. Se você não estiver familiarizado com a Convenção de Mensagens de Commits, pode usar o Commit (ou npm run commit ) em vez de GIT Commit, que fornece uma CLI interativa para gerar mensagens de comprometimento adequadas.

Licença

Mit