【React】個人開発で使用したパッケージ9選(メジャーなものを除く)

はじめに

個人開発で使用したパッケージを公開している記事をあまり見かけた気がしないので作りました。
紹介するのはReact, TypeScript, Firebaseの個人開発で使用したパッケージで、axiosのようなメジャーなものは除外しています。

blueimp-load-image

画像圧縮をしてくれるパッケージです。
Stripe管理画面に登録できる画像が2MB以下と指定されていたのでそちらの対策のために採用しました。
以前canvasを使って画像を圧縮する実装をしたのですが、一から作っていくとかなり苦労した記憶があるのでパッケージがないか探したところblueimp-load-imageを見つけた次第です。

const promises = photos.map(
      async (file): Promise<string> => {
        const data = await loadImage(file, {
          maxWidth: 960,
          canvas: true,
        });
        return new Promise((resolve) => {
          (data.image as HTMLCanvasElement).toBlob(
            async (blob) => {
              const uploadPath = `photos/${user.uid}/${file.name}`;
              const img = await projectStorage.ref(uploadPath).put(blob);
              const imgUrl = await img.ref.getDownloadURL();
              resolve(imgUrl);
            },
            file.type,
            0.95
          );
        });
      }
    );

上記のコードで実装すると下記画像のように画像を圧縮することができました。（まだ2MB以下になっていないけど）

実装の手順は下記を参考にしました。

date-fns

〇〇分前の表示をするために導入しました。
date-fnsは実務使ったことがあるのと、改めて日付系のライブラリを複数調査したのですが下記記事を読んでdate-fnsを採用するに至りました。

実装している中で日本語表示にする場面で引っ掛かりました。下記記事で解決。

react-loader-spinner / react-responsive-carousel / react-animated-burgers

下記記事で紹介されている３つのパッケージを採用しました。

紹介されていたreact-animated-burgersはReact16までのものだったので急遽hamburger-reactを採用。
react-animated-burgersとあまり大きな差異はないと思います。
ドキュメントが分かりやすく、アニメーションも豊富でした。

react-cookie

使うときにちょっとクセがあります。例えばremoveCookieだけ使いたい時

const [removeCookie] = useCookies(["products"]);

と書きたくなるのですが、これはうまくいきません。cookies, setCookieを使わないとしても下記の順番で呼ばないとうまく機能しないので注意してください。

const [cookies, setCookie, removeCookie] = useCookies(["products"]);

実装の手順は下記を参考にしました。

react-lazy-load-image-component

画像が多いアプリを作っているので、UIを向上させるために採用しました。
画像の遅延ロードを実装することができます。
パッケージなだけあって様々なオプションを使用することができるのでお勧めです。
widthやobject-fitなどのCSSは直接コンポーネントに当てれば効きます。

import { FC } from "react";
import {
  ScrollPosition,
  LazyLoadImage,
  trackWindowScroll,
} from "react-lazy-load-image-component";

type Prop = {
  src: string;
  scrollPosition: ScrollPosition;
};

const Image: FC<Prop> = ({ src, scrollPosition }) => {
  return (
    <LazyLoadImage
      src={src}
      className="image"
      scrollPosition={scrollPosition}
    />
  );
};
export default trackWindowScroll(Image);

実装の手順は下記を参考にしました。

Lazy lodingにあまり明るくない方はこちらを見ると良いと思います。図解ありで非常にわかりやすいです。

react-select

オーバースペックかなと思いましたがReactのキャッチアップ過程で採用。
そのまま個人開発でも使用しています。

import Select from "react-select";

  const categories = [
    { value: "development", label: "Development" },
    { value: "design", label: "Design" },
    { value: "sales", label: "Sales" },
    { value: "marketing", label: "Marketing" },
  ];

  type CategoryOp = {
    value: string;
  };

  const Create: FC = () => {
    const [category, setCategory] = useState<CategoryOp | null>(null);
    return (
      <label>
        <span>Category</span>
        <Select
          onChange={(option) => setCategory(option)}
          options={categories}
        />
      </label>
    );
  };

export default Create;

下記画像のようなセレクトを簡単に作ることができます。

react-tinder-card

Tinderみたいなスワイプ機能を実装をするのにドンピシャだったので採用。
あまり実装記事を見なかったので記事を作成しました。
デモ動画、実際に実装しての感想、コードの解説（日本語化）をまとめたものになります。

未実装のパッケージ

先にも述べたように画像の多いアプリを作っているので無限スクロールは入れたいけれどまだ未実装なので紹介だけ。
vue-visibility-observerのreact版（であっているはず）

さいごに

いかがだったでしょうか。
駆け足になりましたが、以上が個人開発で使用したパッケージです。
もしこれらよりも優れているパッケージ、お勧めのパッケージなどありましたらご教示頂けると幸いです。