最近、備忘録のように使用したライブラリのまとめが多いですが…今回もそれです。
今日は「react-loading」という、ローディングアイコンを実装できるライブラリについてご紹介です。
ローディングアイコンやローディング画像は、GIF アニメーション画像を使うことが多かったのですが、このライブラリを使えば、画像を <img> タグで挿入することなく追加することができます。
GitHub のページはこちら。
GitHub – fakiolinho/react-loading: React component for loading animations
https://github.com/fakiolinho/react-loading
デモページはこちらです。
React Loading Demo – CodeSandbox
https://codesandbox.io/s/mqx0ql55qp
8種類のローディング画像を選択することができます。
使い方ですが、まず下記コマンドでインストールします。
npm i react-loading --save
インストールが完了したら、あとは下記のように使用するだけです。
なお、下記のコードは GitHub に掲載されていたものをほぼ転載させて頂いております。
import React from 'react';
import ReactLoading from 'react-loading';
const Example = () => (
<ReactLoading type="spin" />
);
export default Example;
5行目でローディングアイコンを表示していますが、Props の type で、表示したいローディングアイコンの種類を指定しています。
なお、今回は指定していませんが、アイコンの色やサイズも指定できます。
何も指定しない場合、デフォルトの色は白色で、サイズは 64px × 64px です。
上記のサンプルでは、よくありがちなフラフープがクルクルと回っているようなアイコンを指定しています。
他にも、正方形がカコカコと動く Cubes というローディングアイコンや、丸がいくつもクルクルと円を描いて回る SpinningBubbles というアイコンもありました。
8種類もありますので、恐らく好みのローディングアイコンが見つかると思います。
以上、React でローディングアイコンを簡単に実装できるライブラリ「react-loading」のご紹介でした。
ご参考になれば幸いです。
