TypeScriptでよく使う基本機能を含んだTextFieldコンポーネント

目次

ディレクトリ構造

コンポーネント部分のディレクトリ構造は以下とします。

~/TextField
       ┣ index.tsx
       ┗ index.module.css

index.tsx

「index.tsx」には以下を記載します。
テキストフィールドとチェンジイベントの処理のみ用意しています。

import { ChangeEvent } from "react";
import styles from "./index.module.css";

const TextField = ({
  type = "text",
  placeholder = "",
  onChange = (e) => undefined,
}: Props) => {
  return (
    <input
      className={styles.text}
      type={type}
      placeholder={placeholder}
      onChange={onChange}
    />
  );
};

type Props = {
  type?: string;
  placeholder?: string;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
};

export default TextField;

index.module.css

「index.module.css」には以下を記載します。
内部には、テキストフィールドのCSSを任意で記載します。

.text {
    ~~~任意のCSS~~~
}

コンポーネントの呼び出し方

利用する箇所で、以下の様にインポートします。
※「~」の部分は環境によって修正してください。

import TextField from "~/TextField";

以下の様に記載することで、コンポーネントを呼び出す事ができます。

<TextField type="text" placeholder="プレースホルダー" onChange={() => console.log('change'} />