完全にカスタマイズ可能なコンテンツローダを作成する方法

導入

ローダはほぼすべてのアプリケーションの一部です.APIからいくつかのデータをロードするたびに、データが読み込まれていることをユーザーに通知するためにローディングメッセージまたはローディングアイコンを表示する必要があります.
この記事では、カスタマイズ可能ですFacebook , Instagram , or Grid コンテンツローダのように.

必要条件

このチュートリアルを完了するには、次の手順を実行します.

有効なGitインストール.

ノード.JSローカルインストールされます.

このチュートリアルをノードv 13で検証しました.14.0 , NPM v 614.4,noは,no v 16に反応する.13.1、そして、反則コンテンツローダCv . 5.1.0

ステップ1 -インストールし、反応アプリを実行

まず、clonethis GitHub repository 端末から以下のコマンドを実行することで

git clone https://github.com/myogeshchavan97/react-content-loader-demo.git

起動コードはstarter-code 枝と完全なソースコードがマスターブランチに存在するので、starter-code 次のコマンドを端末から実行します.

git checkout starter-code

依存関係をインストールするreact-content-loader バージョン5.1.0のパッケージと

npm install
npm install react-content-loader@5.1.0
npm run start

ステップ2 -アプリケーションにコンテンツローダを統合する

さて、新しいcomponents フォルダ内src フォルダと新しいファイルを追加FacebookLoader.js 次のコンテンツで

import React from 'react';
import { Facebook } from 'react-content-loader';
const FacebookLoader = () => {
  return (
    <div>
      <h2>Facebook Loader</h2>
      <Facebook />
    </div>
  );
};
export default FacebookLoader;

ここでは、デフォルトを追加しましたFacebook からのローダコンポーネントreact-content-loader パッケージ.
さて、オープンsrc/App.js を使いましょうFacebookLoader コンポーネント

import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <FacebookLoader />
    </div>
  );
}
export default App;

これにより、次のようなローダが生成されます.

ステップ3 -カスタマイズローダー

さて、新しいファイルを作成しますInstagramLoader.js 内部components 次のコンテンツをフォルダ

import React from 'react';
import { Instagram } from 'react-content-loader';
const InstagramLoader = () => {
  return (
    <div>
      <h2>Instagram Loader</h2>
      <Instagram width={500} height={500} backgroundColor="#cebaba" speed={3} />
    </div>
  );
};
export default InstagramLoader;

ここでは、ローダをカスタマイズするための余分な小道具を提供している

幅と高さのプロップはピクセルのピクセル幅と高さを指定する

ローダの背景を指定するbackgroundcolor

秒でアニメーションの速度を指定する速度

さて、オープンsrc/App.js を使いましょうInstagramLoader コンポーネント

import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import InstagramLoader from './components/InstagramLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <InstagramLoader />
      <FacebookLoader />
    </div>
  );
}
export default App;

さて、次のようなカスタムInstagramローダが表示されます.

ステップ4 -カスタムSVGコードを使用してローダをカスタマイズする

The react-content-loader Webサイトはまた、背景画像や他のプロパティと一緒にローダの方向を指定することにより、独自のカスタムローダを作成することができますUIツールを提供します.あなたはそれをチェックアウトすることができますHERE
ウェブサイトも、あなたが使うことができる異なるローダのギャラリーを提供します.
たとえば、グリッドレイアウトローダを使用するには、新しいファイルを作成しますGridLayoutLoader.js 内部components 次のコンテンツをフォルダ
さて、オープンsrc/App.js 上記を使うGridLayoutLoader コンポーネント

import React from 'react';
import InstagramLoader from './components/InstagramLoader';
import GridLayoutLoader from './components/GridLayoutLoader';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <GridLayoutLoader />
      <InstagramLoader />
      <FacebookLoader />
    </div>
  );
}
export default App;

すべての利用可能なローダギャラリーを見ることができますHERE

結論

あなたが見たように、コンテンツローダは本当にコンテンツのカスタムアニメーションを使用してアプリケーションを見るようになります.
この記事の完全なソースコードについては、チェックアウトreact-content-loader-demo Githubのリポジトリ.あなたも見ることができますlive demo of this application
あなたの受信トレイに直接驚くべきヒント、トリックや記事を私の毎週のニュースレターを取得する購読することを忘れないでくださいhere .