TypeScriptでリンクをカスタマイズしたコンポーネント

目次

ディレクトリ構造

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

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

index.tsx

「index.tsx」には以下を記載します。
リンク表示内容とリンク押下時の処理のみ用意しています。

import styles from "./index.module.css";

const Link = ({ title = "", onClick = () => undefined }: Props) => {
  return (
    <button onClick={onClick} className={styles.btn_area}>
      <span className={styles.link}>{title}</span>
    </button>
  );
};

type Props = {
  title: string; // リンクの文字
  onClick?: () => void; // リンク押下時処理
};

export default Link;

index.module.css

「index.module.css」には以下を記載します。
リンクのCSSを任意で記載します。

.btn_area {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.link {
  color: #6088E2;
  font-size: 14px;
}

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

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

import Link from "~/Link";

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

<Link title="リンク" onClick={() => console.log('link click'} />