resize-aware-context v1.0.1

resize-aware-context

This is a small wrapper for react-resize-aware which provides some very useful tools for using element queries instead of media queries.

• Creates a context which can be used by child components for responsive styling. This context exposes some useful properties based on popular breakpoints (xs, sm, md, lg, xl)
• Does not render child components until the parent element dimensions are known
• Fully customizable breakpoints

npm i resize-aware-context
yarn add resize-aware-context

Usage

// ParentComponent.jsx
import React from "react";
import { ResizeAwareContextProvider } from "resize-aware-context";

const ParentComponent = () => {
  return (
    <div style={{ position: "relative" }}>
      <ResizeAwareContextProvider>
        {/* children will only render when we know the size of the container. */}
      </ResizeAwareContextProvider>
    </div>
  );
};

// ChildComponent.jsx
import React, { useContext } from "react";
import { ResizeAwareContext } from "resize-aware-context";

const ChildComponent = () => {
  const { sizes, isSmDown, isXlUp } = useContext(ResizeAwareContext);
  return (
    <div style={{ position: "relative" }}>
      <p>
        Parent container size: {sizes.width}px x {sizes.height}
      </p>
      {isSmDown ? "Sm Down" : null}
      {isXlUp ? "Xl Up" : null}
    </div>
  );
};

Context values

{
    sizes: { width: number, height: number },
    isXsUp: boolean, // always true
    isXsDown: boolean,
    isXsOnly: boolean,
    isSmUp: boolean,
    isSmDown: boolean,
    isSmOnly: boolean,
    isMdUp: boolean,
    isMdDown: boolean,
    isMdOnly: boolean,
    isLgUp: boolean,
    isLgDown: boolean,
    isLgOnly: boolean,
    isXlUp: boolean,
    isXlDown: boolean, // always true
    isXlOnly: boolean,
}

Breakpoints

The breakpoints are based on naming conventions established by popular UI libraries like Bootstrap and Material UI. The default values follow the values used by Material UI:

{ xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 }

However, you can use whatever values you like. Here's how you would use Bootstraps:

// ParentComponent.jsx
import React from "react";
import { ResizeAwareContextProvider } from "resize-aware-context";

const breakpoints = { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 };

const ParentComponent = () => {
  return (
    <div style={{ position: "relative" }}>
      <ResizeAwareContextProvider breakpoints={breakpoints}>
        {/* ... */}
      </ResizeAwareContextProvider>
    </div>
  );
};

Notes

• react and react-resize-aware are listed as peerDependencies - you must install those separately.
• react-resize-aware requires that the parent element is position: relative
• When using react-resize-aware, the resize listener must render once in order for the element dimensions to be known. During this initial render, the sizes.width and sizes.height properties are null. As a result, the child components do not know which layout to use, which can result in an unnecessary and expensive render/paint and flash of unwanted content. The ResizeAwareContextProvider fixes this by only rendering children when the parent dimensions are known.
• I'm trying to keep the component light and fast and do not wish to add more breakpoints. If you need more breakpoints, please fork this and add whatever you need... or copy and paste the code into your project - it's only one file.