もともと投稿my personal blog
数日前、非常に人気のUIライブラリを使用して反応プロジェクトのいずれかに取り組んでいる間、私は問題をつまずいた:私は進行状況バーのコンポーネントのいくつかのスタイルの変更を行う必要がありました.しかし、数時間の間それに苦労して、完全な必死になった後に(なぜ、それがドキュメンテーションに書かれているか?私はゼロからプログレスバーのコンポーネントを作成することを決めた.どのように、私はそれを作りましたか.

1プログレスバーを作成します。コンポーネント.jsファイル

import React from "react";

const ProgressBar = (props) => {
  const { bgcolor, completed } = props;
  return (
    <div>
      <div>
        <span>{`${completed}%`}</span>
      </div>
    </div>
  );
};

export default ProgressBar;

基本的に、コンポーネントは2つの部分から成ります.

main parent div container -全バーを表す

子のdiv -完了したパーセンテージ番号が表示されるスパンとバーの一部を完了しました.

カスタムプログレスバーコンポーネントは2つの小道具を受け取ります

bgcolor -バーの完成部分の背景色

完了- 0と100の間の数

スタイリングの追加

このチュートリアルのために、スタイリングのために、私は純粋なインラインCSSを使用するつもりです.もう一つのオプションはstyled-components 図書館ですが、簡単にしましょう.

const ProgressBar = (props) => {
  const { bgcolor, completed } = props;

  const containerStyles = {
    height: 20,
    width: '100%',
    backgroundColor: "#e0e0de",
    borderRadius: 50,
    margin: 50
  }

  const fillerStyles = {
    height: '100%',
    width: `${completed}%`,
    backgroundColor: bgcolor,
    borderRadius: 'inherit',
    textAlign: 'right'
  }

  const labelStyles = {
    padding: 5,
    color: 'white',
    fontWeight: 'bold'
  }

  return (
    <div style={containerStyles}>
      <div style={fillerStyles}>
        <span style={labelStyles}>{`${completed}%`}</span>
      </div>
    </div>
  );
};

export default ProgressBar;

何も空想.主に背景色と境界半径.
我々が開発したものをテストしましょう.

import React from "react";
import "./App.css";
import ProgressBar from "./progress-bar.component";

const testData = [
  { bgcolor: "#6a1b9a", completed: 60 },
  { bgcolor: "#00695c", completed: 30 },
  { bgcolor: "#ef6c00", completed: 53 },
];

function App() {
  return (
    <div className="App">
      {testData.map((item, idx) => (
        <ProgressBar key={idx} bgcolor={item.bgcolor} completed={item.completed} />
      ))}
    </div>
  );
}

export default App;

アプリを実行し、ブラウザで何を持っているかを確認します.

そして、それ!単純なプログレスバーの反応コンポーネントは準備ができています!

ボーナス.アニメーションの追加

実際には、プログレスバーの動きをアニメーション化するには、1つの行をfilerStyleに追加するだけで十分です.

const fillerStyles = {
    ...
    transition: 'width 1s ease-in-out',
    ...
  }

アクションでアニメーションを発揮するには、2秒毎に完成したプロップ値をランダムに生成する関数を作成します.この関数は、useEffectフック内に配置されます.

function App() {
  const [completed, setCompleted] = useState(0);

  useEffect(() => {
    setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
  }, []);

  return (
    <div className="App">
      <ProgressBar bgcolor={"#6a1b9a"} completed={completed} />
    </div>
  );
}

そして最後の結果です.

結論

そして、それ!この短いブログ記事では、カスタムプログレスバーの反応コンポーネントを作成するステップバイステップの手順を説明しました.このコンポーネントは完全にカスタマイズ可能ですので、プロジェクトのニーズに応じて追加のスタイリングと機能を追加することができます.
コンポーネントの完全なソースコードはthis GitHub repository
また、このコンポーネントを使用することもできますnpm package .