2023/12/13 aria-disabledの付け方を改良 2023/12/11 タイポ修正 2023/12/08 next/linkのhrefにundefinedを渡すとエラーがでるため、disabledにする方法を修正 <Button asChild ref={}>とrefを指定できてしまっていたのを修正 セミコロンをつけないように 2023/12/07 タイポ修正(priamry -> primary) import { cloneElement, forwardRef, isValidElement } from "react" import styles from "./style.module.css" import clsx from "clsx" export type ButtonProps = { variant?: "primary" | "secondary"

はじめに JS界隈のユーティリティライブラリといえば、Lodashが有名です。 しかし、Lodashはバンドルサイズが大きすぎるという問題があり、毛嫌いしている人も多いです。 そんななか、Twitterの一部界隈で注目を集めているユーティリティライブラリがRemedaです。 特徴 軽量 すべての関数をimportしてもたった5.3kBです。 さらに、ES Module形式が提供されているため、使っていない関数はビルド時にtree shakeで除外できます。 バンドルサイズが重要なフロントエンドのプロジェクトにも導入しやすいです。 pipe 関数が優秀 pipe関数が優秀で、TypeScriptの補完がバチバチに効きます。 (コードは公式ドキュメントより引用) ちなみにLodashの場合は以下のようなメソッドチェーンでパイプする都合上、すべての関数が読み込まれてしまって、バンドルサイズが激増