react content loader

SVG駆動のコンポーネントプレースホルダーの読み込みを簡単に作成する（Facebookのカードの読み込みなど）。

特徴

• カスタマイズ可能：色、速度、サイズ、さらにはRTLを自由に変更してください。
• ？プラグアンドプレイ：使用する多くのプリセットを使用して、例を参照してください。
• di法： Create-Content-Loaderを使用して、独自のカスタムローダーを簡単に作成します。
• ネイティブサポートの反応：同じ強力な機能と同じAPI。
• ⚛️本当に軽量： Webバージョンの2kb未満と0の依存関係。

索引

• はじめる
• 使用法
  • ネイティブ
• オプション
• 例
• トラブルシューティング
• 同様のパッケージ
• 発達

はじめる

npm i react-content-loader --save

yarn add react-content-loader

反応ネイティブ用

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

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

jsdelivrからのCDN

使用法

それを使用するには2つの方法があります。

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同じインポートを持つWebバージョンと同じ方法で、Reactネイティブで使用できます。

1.プリセット、例を参照してください：

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

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

2。カスタムモード

カスタムローダーを作成するには、重要な違いがあります。NACTINCEネイティブにはSVGコンポーネント用のネイティブモジュールがないため、React-Native-SVGからシェイプをインポートするか、 react-content-loaderインポートから指定されたエクスポートrectとサークルを使用する必要があります。

 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} />は、SVG属性が相対パスで入力されます。関連＃93。
speed?: number デフォルトは1.2です	domを反応させます ネイティブの反応	秒単位のアニメーション速度。
viewBox?: string デフォルトはundefinedです	domを反応させます ネイティブの反応	Viewboxプロップを使用して、カスタムViewBox値を設定します。 それを使用する方法の詳細については、 記事を読んで、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のみを反応します	プロップキーの同じ値を使用してください。 それはSSRの矛盾を解決します。詳細はこちらをご覧ください。
beforeMask?: JSX.Element デフォルトはnullです	domを反応させます ネイティブの反応	コンテンツの前にカスタムシェイプを定義し、 こちらをご覧ください。

すべてのオプションをライブで確認してください

例

Facebookスタイル

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

const MyFacebookLoader = ( ) => < Facebook /> 

Instagramスタイル

 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%' } }
  />
) 

サーバー側のレンダリング（SSR） - スナップショットを一致させます

メインコンポーネントは、SVG要素のIDをバックグラウンドスタイルと一致させるランダム値を生成するため、SSR：サーバーとクライアントの場合、IDのランダム値が2回生成されると、レンダリングで予期しないエラーと比類のない警告に遭遇する可能性があります。または、スナップショットテストの場合：最初の試合でテストを再実行します。

それを修正するには、 uniqueKeyを設定するために、IDはもうランダムになりません。

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

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

アルファは機能していません：safari / iOS

rgba backgroundColorまたはforegroundColor値として使用する場合、Safariはアルファチャネルを尊重しません。つまり、色は不透明になります。これを防ぐために、 backgroundColor / foregroundColorにrgba値を使用する代わりに、 rgb等価物を使用して、Alphaチャネル値をbackgroundOpacity / foregroundOpacity Propsに移動します。

 { /* 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 } >

Safari / iOSのブラックボックス（再び）

SVG要素を含むページでベースタグを使用すると、レンダリングが失敗し、ブラックボックスのように見えます。 <head />からベースHREFタグを削除するだけで、問題が解決しました。

参照：＃93 /109

ブラウザはSVG-Animateをサポートしています

古いブラウザはSVG（互換性リスト）のアニメーションをサポートしていません。プロジェクトをサポートする必要がある場合は、例として、ブラウザがSVGアニメートをサポートすることを確認するためのいくつかの方法を次に示します。

• window.SVGAnimateElement
• document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#SVG-Animation", "1.1")
• またはhttps://modernizr.com/を使用することもできます

同様のパッケージ

• React Native：RN-PlaceHolder、React-Native-SVG-aNimated-Linear-radient;
• プアクト;
• Vue.js：Vue-Content-Loading、Vue-Content-Roader;
• Angular：NGX-Content-Loading、NGX-Content-Loader。

---

発達

レポをフォークしてからクローンを作成します

 $ 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 ：すべてのテストを実行：タイプチェック、Webおよびネイティブでの単体テスト。

$ npm run test:watch ：監視単位テスト。

ネイティブの反応

React Nativeはシンボリックリンクをサポートしていないため（依存関係を別のフォルダーにリンクするため）、貢献を確認する遊び場（ストーリーブックなど）がないため、これはプロジェクトをローカルに実行するための推奨戦略です。

1. メトロまたは作成のネイティブネイティブをゼロから作成します。
2. ルートプロジェクトへの依存関係をインストールする： yarn add react-content-loader react-native-svg
3. 作成したばかりのプロジェクトを開き、そこにこのリポジトリをクローンします。
4. 読み込みコンポーネントを作成し、 react-content-loader import ContentLoader, { Rect, Circle } from './react-content-loader/native'に向けます。

メッセージをコミットします

コミットメッセージはコミットメッセージコンベンションに従う必要があるため、Changelogはそれによって自動的に生成される可能性があります。コミットメッセージは、コミット時に自動的に検証されます。 Commitメッセージコンベンションに慣れていない場合は、Git Commitの代わりにYARNコミット（またはnpm run commit ）を使用できます。これにより、適切なコミットメッセージを生成するためのインタラクティブCLIが提供されます。

ライセンス

mit