react content loader
v7.0.2
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-svgJSDELIVR의 CDN
그것을 사용하는 두 가지 방법이 있습니다.
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. 사용자 정의 모드
사용자 정의 로더를 만들려면 중요한 차이점이 있습니다. React Native는 SVG 구성 요소 용 기본 모듈이 없으므로 React-Native-SVG에서 모양을 가져 오거나 react-content-loader 가져 오기에서 명명 된 Export rect 및 Circle을 사용해야합니다.
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 | 반응 Dom 원시 반응 | false 으로 애니메이션을 옵트 아웃합니다 |
title?: string기본값으로 Loading... | DOM 만 반응합니다 | 그것은 그것이 어떤 요소인지 설명하는 데 사용됩니다.'' (빈 문자열)를 사용하여 제거하십시오. |
baseUrl?: string기본값은 빈 문자열로 나타납니다 | DOM 만 반응합니다 | <base url="/" /> document <head/> 를 사용하는 경우 필수입니다.이 소품은 일반적으로 사용됩니다. <ContentLoader baseUrl={window.location.pathname} /> 관련 #93. |
speed?: number기본값은 1.2 입니다 | 반응 Dom 원시 반응 | 초의 애니메이션 속도. |
viewBox?: string기본값은 undefined | 반응 Dom 원시 반응 | Viewbox Props를 사용하여 사용자 정의 뷰 박스 값을 설정하고 사용 방법에 대한 자세한 내용은 SVG를 확장하는 방법을 읽으십시오. |
gradientRatio?: number기본값은 1.2 입니다 | DOM 만 반응합니다 | 뷰 박스 너비의 일부인 애니메이션 그라디언트의 너비. |
rtl?: boolean기본값으로 false | 반응 Dom 원시 반응 | 컨텐츠 오른쪽에서 왼쪽. |
backgroundColor?: string기본값은 #f5f6f7 입니다 | 반응 Dom 원시 반응 | 애니메이션의 배경으로 사용됩니다. |
foregroundColor?: string기본값으로 #eee | 반응 Dom 원시 반응 | 애니메이션의 전경으로 사용됩니다. |
backgroundOpacity?: number기본값은 1 입니다 | 반응 Dom 원시 반응 | 배경 불투명도 (0 = 투명, 1 = 불투명) 사파리에서 문제를 해결하는 데 사용됩니다 |
foregroundOpacity?: number기본값은 1 입니다 | 반응 Dom 원시 반응 | 애니메이션 불투명도 (0 = 투명, 1 = 불투명) 사파리에서 문제를 해결하는 데 사용됩니다 |
style?: React.CSSProperties기본값 {} | DOM 만 반응합니다 | |
uniqueKey?: string기본값으로 임의의 고유 ID | DOM 만 반응합니다 | Prop Key의 동일한 값을 사용하십시오. 그것은 SSR에서 불일치를 해결할 것입니다. |
beforeMask?: JSX.Element기본값으로 NULL | 반응 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 요소의 ID와 일치하는 임의의 값을 배경 스타일로 생성하므로 SSR의 경우 ID의 임의 값이 두 번 생성되면 예상치 못한 오류 및 렌더에 대한 경고를받을 수 있습니다. SSR : 서버 및 클라이언트; 또는 스냅 샷 테스트의 경우 : 첫 번째 경기에서 테스트를 다시 실행합니다.
그것을 고치려면 소품 uniqueKey 설정하면 더 이상 ID가 무작위가되지 않습니다.
import { Facebook } from 'react-content-loader'
const MyFacebookLoader = ( ) => < Facebook uniqueKey = "my-random-value" /> rgba backgroundColor 또는 foregroundColor 값으로 사용하는 경우 Safari는 Alpha 채널을 존중하지 않으므로 색상이 불투명합니다. 이를 방지하려면 backgroundColor / foregroundColor 에 rgba 값을 사용하는 대신 rgb 등가를 사용하여 Alpha 채널 값을 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 /> 에서 Base-Href 태그를 제거하면 문제가 해결되었습니다.
참조 : #93 / 109
이전 브라우저는 SVG (호환성 목록)에서 애니메이션을 지원하지 않으며 프로젝트를 지원 해야하는 경우 예를 들어 브라우저가 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 : 빌드에 생산;
$ npm run dev : 스토리 북을 실행하여 변경 사항을 확인하십시오.
$ npm run test : 모든 테스트 실행 : 웹 및 네이티브에서 유형 확인, 단위 테스트;
$ npm run test:watch : 시계 단위 테스트;
React Native는 상징적 링크 (종속성을 다른 폴더에 연결하기 위해)를 지원하지 않으므로 기여 (스토리 북과 같은 기여)를 확인할 운동장이 없으므로 프로젝트를 로컬로 운영하는 전략이 권장됩니다.
yarn add react-content-loader react-native-svgreact-content-loader 프로젝트에 import ContentLoader, { Rect, Circle } from './react-content-loader/native' 다음과 같이 복제 된 프로젝트에 다음과 같이 복제되었습니다. 커밋 메시지는 커밋 메시지 규칙을 따라야하므로 변경 로그는 자동으로 생성 될 수 있습니다. 커밋 메시지는 커밋시 자동으로 검증됩니다. Commit Message Convention에 익숙하지 않은 경우 Git Commit 대신 Yarn Commit (또는 npm run commit )을 사용할 수 있으며, 이는 적절한 커밋 메시지를 생성하기위한 대화식 CLI를 제공합니다.
MIT
