反応成分における応答設計?

動機
先日、私は自分が反応部品の反応設計をどのように実装するかについての情報を探していることを知りました.何か明確なことはありませんでした.どんなパターンや推奨された方法についても言及することはできませんでした.
応答性のデザインについての情報を検索するとすぐに、メディアクエリーの使用はすぐに来ますが、一般的に、それが分離されたコンポーネントに貢献するようには見えません.
ウィンドウ全体の変更に対応するコンポーネントを作ることは意味をなさないようです.コンポーネントは自分自身の寸法に対応しなければなりません.
また、いくつかのCSSツールを使用可能なスペース内の要素のレイアウトを管理するために使用することもできます.たとえば、FlexboxやCSSグリッドでは、いくつかの応答動作を要素に与えることができますが、メディアクエリを使用するのと同じレベルになることはありません.
このような理由から、私はメディアのクエリと同じ概念を使用するが、コンポーネントに指向することは良い考えかもしれないと思いました.

何を達成したいですか?
このような.


どのようにそれを実装するには?
ResizeObserverが登場したとき、コンポーネントのサイズ変更を検出し、それに反応するブラウザAPIが登場したので、すぐに私が何を実行するのか不思議に思ったので、それは私がしたいことに役立つかもしれません.
必要とされるもう一つのことは、要素のブレークポイントを定義する標準的な方法と、指定された時間内にコンポーネントのサイズ範囲を検出する方法を提供することです.
私のこのアプローチは、

最初に、コンポーネントのブレークポイントを定義する方法を確立する構造を選択します.

これらのブレークポイントから

は、サイズ範囲のリストを識別し、それらのそれぞれのCSSクラスを生成します.

また、各変更後のコンポーネントのサイズを識別するために必要になります.

この方法では、メディアクエリと同じ動作をすることができます.コンポーネントがその範囲を変更するたびに、我々はプロペラCSSクラスを割り当てることができます、そして、必要なスタイルは適用されます.
あなたのアイデアを見ることができるように簡単ですので、手順です.私は、それが必要である速い方法でそれを再利用することができるように、フックにロジックをカプセル化することに決めました.https://www.npmjs.com/package/@jrx2-dev/use-responsive-class

このフックはどんな具合ですか.
フックは、制御されるコンポーネントへの参照を受け取り、必要に応じてブレークポイントを使用する.
ブレークポイントを受信しない場合は、定義済みのものを使用します.
ブレークポイントは、次のインターフェイスを実装する必要があります

interface breakpointsInput {
  readonly [key: string]: number;
}

例(デフォルトのブレークポイント):

const MEDIA_BREAKPOINTS: breakpointsInput = {
  small: 420,
  big: 768,
};

使用されるブレークポイント(それぞれの生成されたCSSクラスで)に従って、幅範囲(mediabreakpoints)が作成されます.
生成されたMediaBreakPointsは次のインターフェイスに準拠します.

interface mediaBreakpoints {
  class: string;
  from: number;
  toUnder: number;
}

そして

createMediaBreakpoints(MEDIA_BREAKPOINTS);

...戻り値:

[
  {
    class: "to-small",
    from: 0,
    toUnder: 420,
  },
  {
    class: "from-small-to-under-big",
    from: 420,
    toUnder: 768,
  },
  {
    class: "from-big",
    from: 768,
    toUnder: Infinity,
  },
];

コンポーネントのサイズの変更が検出されるたびに、GetCurrentSizeClassメソッドが呼び出され、その幅範囲に対応するCSSクラスが返されます.

  getCurrentSizeClass(elementWidth, mediaBreakpoints)

このフックの使い方

npm i @jrx2-dev/use-responsive-class

import { useResponsiveClass } from '@jrx2-dev/use-responsive-class';

/*
const elementBreakpoints: breakpointsInput = {
  small: 420,
  big: 768,
};
*/

const elRef = createRef<HTMLDivElement>();
const [responsiveClass] = useResponsiveClass(elRef);
// const [responsiveClass] = useResponsiveClass(elRef, elementBreakpoints);
return (
   <div ref={elRef} className={classes[responsiveClass]}>
      Some content
   </div>
);

スタイルはこのようなものでなければなりません.

.root {
  &.to-small {
    background-color: green;
  }
  &.from-small-to-under-big {
    background-color: yellow;
  }
  &.from-big {
    background-color: red;
  }
}

デモ:
私は個人用のデモプロジェクトで使用するコンポーネントライブラリにこのカスタムフックを使用します.https://www.npmjs.com/package/@jrx2-dev/react-components
プロジェクトの絵本の例のコンポーネントを使用してこのテクニックを見ることができます.https://jrx2-dev.github.io/react-components

注意:
私は、コンポーネントのレイアウトの変更の間にアニメーションを追加する少し気が散らされたことを言ったことがあると言わなければならない、ロジックはフックusefadeonsizechangeでカプセル化されて、私はレイアウトの間の移行をもう少し流体化する必要があると思いました.

まとめ
この実験は、反応中の真の応答性成分の設計を可能にするシステムを開発するための概念の証拠として私に役立った.
明らかにコードを改善することができます、任意のコメントや提案を歓迎します.この記事のアイデアは大抵の質問であった.どうやってやるの?
peperanceについては、サードパーティのフック(@ Response Hook/Resizeオブザーバ)がResizeObserver実装のために最適化されて使用されていると良い結果を与えるようです.
私がここで強調することに興味があることは、実装自体ではなく、使用される概念ではありません.