【React】最近使ったオススメのnpmパッケージ

2022-04-17

最近の開発で使って良かった npm パッケージを書いていこうと思います。


@chakra-ui/breadcrumb

パンくずリストをサクッと作りたいときに便利です。

自分の環境ではインストール周りでたまーに引っかかることがある困ったちゃんですが、基本的には良い感じです。

スタイリングもしやすくて良いですね。

@szhsin/react-menu

ドロップダウンメニューをさくっと作りたいときにぴったりです。

カスタマイズ性も高く、公式サイトもわかりやすくおしゃれです。

next-connect

Next.js の api に組み込める handler 用のパッケージです。

チェーン構文で共通処理とメソッドごとの処理を明確に分割できるのが好印象です。

getServerSideProps 周りでも使えるので、いろいろと使いみちはありそうです。

rc-drawer

ドロワー系のパッケージはいくつかあるのですが、rc-drawer がもっとも無難かなーという印象です。

クセもなく使いやすいです。

rc-menu

レガシーな横向きのメニューの実装にピッタリです。

とはいえ props で縦向きにも切り替えられて、ネストメニューにも強いのが良いですね。

react-calendar

カレンダー系のパッケージもいくつかありますが、なんやかんやで react-calendar を使うことが多いです。

デフォルトで用意されている CSS ファイルを読み込まないようにすれば、比較的素直にスタイリングしやすいのが良いですね。

react-hamburger-menu

アニメーションつきのハンバーガーメニューをサクッと作りたいときに便利です。

個性的な動きでもないので、なんにでも汎用的に使えそうです。

react-paginate

最近レガシーになりつつページネーションですが、まだまだ実装を求められるケースもあると思います。

1 から実装するのも結構めんどくさいので、こういうパッケージがあるのは本当に助かります。

react-string-replace

たまーに文字列の一部を Node へ置換したいケースに出会うのですが、そういうときに重宝します。

文章の一部の文字色や太さを変えたいときなどに使えます。

react-table

テーブル系のパッケージもやまほどありますが、自分は無難に react-table をよく使います。

ただ型周りが少し弱いのと、拡張で追加可能なソート機能がイマイチだったりと、かゆいところに手が届かない感じがもどかしいです。

とはいえ素で実装するよりは 100 倍マシだと思います。

react-tabs

フロントの敵である、タブの実装に便利なパッケージです。

url との連動がしっくりこなかったりするのですが、自分の実装が悪いのかもしれないです。

タブもなかなかどうして実装泣かせなので、パッケージ頼りになりがちですよね。

select2-react-component

フィルタリング機能が付与されたセレクトボックスがをさくっと作れます。

こういう系は普段そこまで使わないのですが、いざというときに重宝します。

sweetalert

素のダイアログが大嫌いなので、自分はいつも sweetalert を使います。

使いやすくおしゃれなので、とくにカスタマイズも必要ないかなと。

型周りも以前と比べてだいぶアップデートされていたので安心です。

usehooks-ts

今回もっともオススメのパッケージです。

カスタム hooks の詰め合わせ系はいくつかあるのですが、個人的には新しいだけあって usehooks-ts がもっとも使いやすい印象があります。

ぜひ一度公式サイトを読んでみてほしいです。


pretty-checkbox-react

最近はチェックボックスすら実装が面倒なのでパッケージを使っちゃってます。

pretty-checkbox-react はかわいくて良い感じなのでオススメです。

react-copy-to-clipboard

文字列のコピーをさくっと実装したい場合に便利です。

たださっき気づいたのですが usehooks-ts にも同じ hooks が含まれているので、こっちはいらないかもです。

react-hot-toast

トースト系のパッケージもいろいろとありますが、最近は react-hot-toast が一番しっくりきています。

使いやすさはもちろんのこと、カスタマイズ性も高く、非同期系にも対応していてかなりすごいです。

公式サイトもかわいくて読みやすく、とても好印象です。

react-pro-sidebar

サイドバーの実装もまた面倒なのでパッケージで済ませがちです。

react-pro-sidebar は最近はじめて使ったのですが、クール度が高いです。

ただ左からしか開けないのが少しだけ残念…ハックしたら右開きもいけそうなんですが…。

react-resize-panel

パネル同士でリサイズさせる必要がある場合たまに使います。

ちょっと古めではあるのですが、他のパッケージよりはまだ使いやすいのかなという印象です。

ただかなり使い勝手のクセが強いので、使用する際はしっかりと公式のサンプルを参考にしたほうが良いと思います。

react-sidebar

react-pro-sidebar よりもクセがない感じのサイドバーがほしい場合はこちらが便利です。

こちらは右開きにも対応されており、アニメーションも素直で良い感じです。

react-social-login-buttons

SNS 系のログインボタンをさくっと作ってくれる超便利パッケージです。

自分はほぼ firebase を通して認証系を作成するのですが、firebase から提供されているボタン系のパッケージって使い勝手が結構悪いです。

なのでもっぱらボタンはこっちを使って実装しがちです。

use-breakpoint

ブレークポイント周りが CSS で対応しきれない場合に、このカスタム hooks を使います。

さくさくっと切り替えられるようになるのでオススメです。


まだまだオススメのパッケージが紹介しきれていないのですが、ひとまず最近使った中でオススメのパッケージは以上となります。

© 2018 kk-web