UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
【React】useMediaQuery は最終手段にしよう
こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ
React✖️Tailwind CSSで一緒に使いたいライブラリ4選
ReactのスタイリングライブラリとしてTailwind CSSを使われる方は、そこそこいるのではないでしょうか？ そんな方にオススメのライブラリがあるので、紹介します。 ✨ prettier-plugin-tailwindcss tailwindの欠点として、クラス名が長くなりやすいということがあります。この時、tailwindのユーティリティクラスの並びが不規則だとさらに読みにくくなります。クラス名を自動でソートしてくれるprettierのプラグインを公式が配布しています。それがprettier-plugin-tailwindcssです。公式サイトにも案内があります。 その案内にも例が挙げられていますが、このプラグインを使うと以下のように、prettierがクラス名の並び替えを行なってくれるようになります。 - <div class="text-gray-700 shadow-md p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
