react content loader
v7.0.2
Компонент SVG с мощностью SVG для легко создания заполнителей (например, загрузки карт 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 от jsdelivr
Есть два способа его использовать:
1. ПРЕДУПРЕТЫ, см. Примеры:
import ContentLoader , { Facebook } from 'react-content-loader'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Пользовательский режим, см. Онлайн -инструмент
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 >
)Все еще не ясно? Взгляните на этот рабочий пример на CodeSandbox.io или попробуйте практическую демо-демо-компоненты и установите его с bit.dev
react-content-loader может использоваться с REACT Native так же, как веб-версия с тем же импортом:
1. ПРЕДУПРЕТЫ, см. Примеры:
import ContentLoader , { Facebook } from 'react-content-loader/native'
const MyLoader = ( ) => < ContentLoader />
const MyFacebookLoader = ( ) => < Facebook />2. Пользовательский режим
Для создания пользовательских погрузчиков существует важная разница: поскольку RACET CANITE не имеет ни одного собственного модуля для компонентов SVG, необходимо импортировать формы из React-C-C-SVG или использовать названный экспортный прямо и круг из импорта 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 >
) Имя и тип предложения | Среда | Описание |
|---|---|---|
animate?: booleanПо умолчанию к true | React Dom Реагировать на родной | Отказ от анимации с false |
title?: stringПо умолчанию Loading... | Реагировать только DOM | Он используется, чтобы описать, какой это элемент. Используйте '' (пустая строка), чтобы удалить. |
baseUrl?: stringПо умолчанию в пустую строку | Реагировать только DOM | Требуется, если вы используете <base url="/" /> document <head/> .Эта опора используется как: <ContentLoader baseUrl={window.location.pathname} /> , который заполнит атрибут SVG относительным путем. Связанный #93. |
speed?: numberПо умолчанию до 1.2 | React Dom Реагировать на родной | Скорость анимации за считанные секунды. |
viewBox?: stringПо умолчанию undefined | React Dom Реагировать на родной | Используйте Viewbox Reps, чтобы установить пользовательское значение Viewbox, Для получения дополнительной информации о том, как его использовать, Прочитайте статью, как масштабировать SVG. |
gradientRatio?: numberПо умолчанию до 1.2 | Реагировать только DOM | Ширина анимированного градиента как часть ширины коробки вида. |
rtl?: booleanПо умолчанию false | React Dom Реагировать на родной | Содержание справа налево. |
backgroundColor?: stringПо умолчанию #f5f6f7 | React Dom Реагировать на родной | Используется как фон анимации. |
foregroundColor?: stringПо умолчанию #eee | React Dom Реагировать на родной | Используется в качестве переднего плана анимации. |
backgroundOpacity?: numberПо умолчанию 1 | React Dom Реагировать на родной | Фоновая непрозрачность (0 = прозрачная, 1 = непрозрачная) используется для решения проблемы в Safari |
foregroundOpacity?: numberПо умолчанию 1 | React Dom Реагировать на родной | Непрозрачность анимации (0 = прозрачный, 1 = непрозрачный) используется для решения проблемы в Safari |
style?: React.CSSPropertiesПо умолчанию {} | Реагировать только DOM | |
uniqueKey?: stringПо умолчанию случайный уникальный идентификатор | Реагировать только DOM | Используйте то же значение клавиша Prop, Это решит несоответствие на SSR, см. Больше здесь. |
beforeMask?: JSX.ElementПо умолчанию на ноль | React Dom Реагировать на родной | Определить пользовательские формы перед контентом, Смотрите больше здесь. |
Смотрите все варианты в прямом эфире
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 /> 
Для пользовательского режима используйте онлайн -инструмент.
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 >
) 
Чтобы избежать неожиданного поведения, у пакета нет мнений. Поэтому, если это должно быть отзывчивым, имейте в виду, что результат пакета является обычным SVG, поэтому ему просто нужны те же атрибуты, чтобы стать обычным SVG, а это значит:
import { Code } from 'react-content-loader'
const MyCodeLoader = ( ) => (
< Code
width = { 100 }
height = { 100 }
viewBox = "0 0 100 100"
style = { { width : '100%' } }
/>
) Поскольку основной компонент генерирует случайные значения в соответствии с идентификатором элемента SVG с фоновым стилем, он может столкнуться с неожиданными ошибками и непревзойденным предупреждением о рендере, как только случайное значение идентификатора будет сгенерировано дважды, в случае SSR: сервер и клиент; Или в случае теста на снимки: на первом матче и повторно выполнять тест.
Чтобы исправить это, установите uniqueKey клавиш, тогда идентификатор больше не будет случайным:
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> При использовании rgba в качестве значения backgroundColor или foregroundColor , Safari не уважает альфа -канал, что означает, что цвет будет непрозрачным. Чтобы предотвратить это, вместо использования значения rgba для backgroundColor / foregroundColor , используйте эквивалент rgb и переместите значение альфа -канала в репутация 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 } >
Использование базовой теги на странице, содержащей элементы SVG, не выполняется, и он выглядит как черный ящик. Просто удалите базовую метку из <head /> , и проблема была решена.
Смотрите: #93/109
Старые браузеры не поддерживают анимацию в SVG (список совместимости), и если ваш проект должен поддерживать IE, для примеров, вот несколько способов убедиться, что браузер поддерживает Animate SVG:
window.SVGAnimateElementdocument.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")Разветвляется репо, а затем клонируйте его
$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader
$ npm i : установить зависимости;
$ npm run build : Build to Production;
$ npm run dev : Запустите сборник рассказов, чтобы увидеть ваши изменения;
$ npm run test : запустите все тесты: проверка типа, модульные тесты в Интернете и нативном;
$ npm run test:watch : часы -модульные тесты;
Поскольку RACE Native не поддерживает символические ссылки (для связи зависимости с другой папкой) и, поскольку нет игровой площадки, чтобы проверить ваши взносы (например, сборник рассказов), это рекомендуемая стратегия для запуска проекта на локальном уровне:
yarn add react-content-loader react-native-svgreact-content-loader на проект, который просто клонирован, например: import ContentLoader, { Rect, Circle } from './react-content-loader/native' Сообщения коммита должны следовать соглашению о сообщении о коммите, поэтому изменчивы могут быть сгенерированы автоматически. Сообщения коммита подтверждаются автоматически при совершении коммита. Если вы не знакомы с соглашением о сообщении о коммит, вы можете использовать коммит пряжи (или npm run commit ) вместо GIT Commit, который предоставляет интерактивный CLI для создания надлежащих сообщений о коммите.
Грань
