bar-of-progress(日本語)

小さくて使いやすく、依存関係のないローディングバーのコンポーネントです。

Features

  1. 依存関係なし:特定のフレームワークにも依存していません。

  2. サイズが小さい:Brotli で圧縮すると 500 バイト未満(gzip で圧縮すると 600 バイト未満)です。

  3. 簡単な使用方法:数行の追加ですぐに使用できます。TypeScript もサポートしています。


Installation

npm i @badrap/bar-of-progress は、Node.js のパッケージマネージャーである npm を使用して、"@badrap/bar-of-progress"というパッケージをインストールするコマンドです。このパッケージは、軽量で使いやすい進捗バーのコンポーネントを提供し、特定のフレームワークに依存しない特徴を持っています。インストール後は、わずかなコードで進捗バーを使用することができます。TypeScript もサポートされています。

Cautions

"@badrap/bar-of-progress"パッケージの使用に関する特別な注意事項は明示されていません。ただし、一般的なNode.jsパッケージの使用時に考慮すべきいくつかの注意事項があります。

  • Name
    互換性
    Type
    注意事項
    Description

    "@badrap/bar-of-progress"パッケージが現在使用しているNode.jsのバージョンと互換性があるかを確認する必要があります。

  • Name
    依存関係の管理
    Type
    注意事項
    Description

    このパッケージをインストールすると、自動的にpackage.jsonファイルに追加されます。このファイルを使用してプロジェクトの依存関係を管理し、必要なバージョンのパッケージが常にインストールされるようにする必要があります。

  • Name
    セキュリティ
    Type
    注意事項
    Description

    npmパッケージをインストールする際には、信頼できるソースから提供されていることを常に確認することが重要です。不明なソースからのパッケージは、コードにセキュリティリスクをもたらす可能性があります。

  • Name
    メンテナンス
    Type
    注意事項
    Description

    パッケージを最新の状態に保ち、バージョンの更新に伴う互換性の問題に備える必要があります。

Installation

npm i @badrap/bar-of-progress

Usage

パッケージをインポートし、進捗バーのインスタンスを作成します。

  • Name
    .start()メソッドを呼び出す
    Type
    Usage
    Description

    .start()メソッドを呼び出して進捗バーを表示し、アニメーションを開始します。

  • Name
    .finish()メソッドを呼び出す
    Type
    Usage
    Description

    .finish()メソッドを呼び出して進捗バーアニメーションを終了します。

Cautions

  • Name
    クイックタスク
    Type
    Cautions
    Description

    .start()が呼び出されると、進捗バーはすぐには表示されません。代わりに、非常に速く完了するタスクの進捗バーを表示しないために、80ミリ秒の遅延があります。これ(およびその他の動作)はカスタマイズオプションを参照して変更することができます。

  • Name
    再利用性
    Type
    Cautions
    Description

    進捗バーのインスタンスを使用する場合、各ページの遷移ごとにアニメーションが最初から開始されます。

Usage

import ProgressBar from "@badrap/bar-of-progress";

const progress = new ProgressBar();

.start()

progress.start();

.finish()

  setTimeout(() => {
    progress.finish();
  }, 1000);

Customization

進捗バーの形状と動作は、コンストラクタのパラメータを介して(わずかに)カスタマイズすることができます。以下にオプションとデフォルト値を示します。

Explanation

  • Name
    size
    Type
    Customization
    Description
    • 進捗バーのサイズ(太さ)です。

    • 数値の値はピクセル(px)に変換されます。

  • Name
    color
    Type
    Customization
    Description
    • 進捗バーの色です。

    • 進捗バーの周りの光る効果にも使用できます。

  • Name
    class
    Type
    Customization
    Description
    • 進捗バー要素に使用されるクラス名です。
  • Name
    delay
    Type
    Customization
    Description
    • .start()を呼び出した後、進捗バーのアニメーションが開始するまでの待機時間(ミリ秒単位)です。

Customization

const progress = new ProgressBar({

  // The size (height) of the progress bar.
  // Numeric values get converted to px.
  size: 2,

  // Color of the progress bar.
  // Also used for the glow around the bar.
  color: "#29e",

  // Class name used for the progress bar element.
  className: "bar-of-progress",

  // How many milliseconds to wait before the progress bar
  // animation starts after calling .start().
  delay: 80,
});

Example

Next.jsのルーティングイベントを使用して、ページ遷移中に進捗バーのアニメーションを表示する方法です。ここで使用されているRouter.eventsは、Next.jsのRouterオブジェクトで提供されるイベントを表しています。

Additional Explanation

  • Name
    routeChangeStart
    Type
    Example
    Description

    このイベントはルートの変更が開始される直前に発生します。このイベントが発生すると、progress.start()が呼び出されて進捗バーのアニメーションが開始されます。

  • Name
    routeChangeComplete
    Type
    Example
    Description

    このイベントはルートの変更が完了した時に発生します。このイベントが発生すると、progress.finish()が呼び出されて進捗バーのアニメーションが終了します。

  • Name
    routeChangeError
    Type
    Example
    Description

    このイベントはルートの変更中にエラーが発生した場合に発生します。このイベントが発生すると、progress.finish()が呼び出されて進捗バーのアニメーションが終了します。


useEffectは、コンポーネントがマウントされたとき(またはrouter.eventsが変更されたとき)にその内部のコードを実行するReactのフックです。このコードでは、先に述べた各イベントのハンドラが登録されています。

さらに、useEffect はクリーンアップ関数を返します。この関数は、コンポーネントがアンマウントされるか次の useEffect が実行される前に呼び出されます。このコードにより、メモリリークが防止されます。

_app.js

Router.events.on('routeChangeStart', onRouteChange)

Router.events.on('hashChangeStart', onRouteChange)

const progress = new ProgressBar({
size: 4,
color: '#F7AB0A',
className: 'z-50',
delay: 100,
})

Router.events.on('routeChangeStart', () => progress.start())
Router.events.on('routeChangeComplete', () => progress.finish())
Router.events.on('routeChangeError', () => progress.finish())

useEffect(() => {
const handleRouteChangeStart = () => {
  progress.start()
}

const handleRouteChangeComplete = () => {
  progress.finish()
}

const handleRouteChangeError = () => {
  progress.finish()
}

router.events.on('routeChangeStart', handleRouteChangeStart)
router.events.on('routeChangeComplete', handleRouteChangeComplete)
router.events.on('routeChangeError', handleRouteChangeError)

return () => {
  router.events.off('routeChangeStart', handleRouteChangeStart)
  router.events.off('routeChangeComplete', handleRouteChangeComplete)
  router.events.off('routeChangeError', handleRouteChangeError)
}

}, [router.events])