React で、何かの処理中に画面をロックするには、Spinnerを利用することがいちばん多いと思います。
React には、色々なプラグインがありますが、「react-spinner-overlay」が非常に利用しやすいです。
本記事では、簡単な利用方法を説明しています。
インストール
|
1 |
npm install react-spinner-overlay |
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { CircleSpinnerOverlay, FerrisWheelSpinner } from 'react-spinner-overlay' ... const [loading, setLoading] = useState<boolean>(true) ... return ( <> <FerrisWheelSpinner loading={loading} size={28} /> <CircleSpinnerOverlay loading={loading} overlayColor="rgba(0,153,255,0.2)" /> </> ) |
react-spinner-overlay
公式サイトは、こちらのリンクになります。
https://github.com/arisaokasaka/react-spinner-overlay
