はじめに
いい感じにフォームの中にローディングアイコンを表示させたかった。
そのとき作ったコンポーネントのメモ
ReactというよりもCSSの記事になっているかな？
作ったもの
検索フォームのようなものを想定していて、ローディング中にはクルクルアイコンが表示されるような感じ
ローディングアイコンには
react-loader-spinnerというライブラリを利用
方針
input要素とアイコンのコンポーネントをdivタグで囲む
divタグをフォームっぽいUIにする
input要素はスタイルを無効にする
実装
CSSはインラインスタイルでベタ書き
TypeScriptで書いてます。
import React, { Dispatch, SetStateAction } from "react";
import Loader from "react-loader-spinner";
interface Props {
formText: string;
setFormText: Dispatch<SetStateAction<string>>;
isLoading: boolean;
}
export const Form: React.VFC<Props> = (props) => {
return (
<div
style={{
display: "flex",
width: "100%",
padding: "12px",
boxShadow: "0 0 3px gray",
borderRadius: 100,
}}
>
<input
style={{
width: "95%",
fontSize: 18,
appearance: "none",
border: "none",
outline: "none",
}}
placeholder="キーワードを入力"
value={props.formText}
onChange={(e) => props.setFormText(e.target.value)}
/>
<div style={{ height: 24, width: 24, margin: "auto 0 auto auto" }}>
<Loader
type="Oval"
color="gray"
height={24}
width={24}
visible={props.isLoading}
/>
</div>
</div>
);
};
最後に
ご指摘等あればコメントお願いします！
↧