Necessarily Precedes Mischief

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published


    Motivation: Proof of concept

    The idea behind this hook is to apply at component level the same mechanics provided by the media queries but in this case taking as a reference the space occupied by the component itself.

    A use case would be the need to create components that are represented differently depending on the space they are going to have. For example, for a responsive component library published in npm.

    The hook receives a reference to the component to be controlled and optionally breakpoints to be used. In case of not receiving breakpoints, predefined ones will be used.

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

    Example (defaults breakpoints):

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

    Size ranges will be created according to the breakpoints used with their respective classes.

      interface mediaBreakpoints {
        class: string;
        from: number;
        toUnder: number;
      const mediaBreakpoints = createMediaBreakpoints(MEDIA_BREAKPOINTS);

    Sample response:

              class: "to-small",
              from: 0,
              toUnder: 420,
              class: "from-small-to-under-big",
              from: 420,
              toUnder: 768,
              class: "from-big",
              from: 768,
              toUnder: Infinity,

    Each time a change is made to the size of the component, the class corresponding to that size range will be returned.

      getCurrentSizeClass(elementWidth, mediaBreakpoints) : "to-small" | "from-small-to-under-big" | "from-big"

    How to use the hook:

        const elRef = createRef<HTMLElement>();
        const [responsiveClass] = useResponsiveClass(elRef);
        return (<div ref={elRef}>{responsiveClass}</div>);

    The styles should be something like this:

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

    The package was generated following these guidelines:

    A third party hook was used for ResizeObserver:




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

    DownloadsWeekly Downloads






    Unpacked Size

    38.5 kB

    Total Files


    Last publish


    • jrx2