@paprika/resize-detector
TypeScript icon, indicating that this package has built-in type declarations

2.0.6 • Public • Published

@paprika/resize-detector

Description

A wrapper that provides debounced updates of its dimensions.

Installation

yarn add @paprika/resize-detector

or with npm:

npm install @paprika/resize-detector

Props

ResizeDetector

Prop Type required default Description
breakpointLarge number false 768 The width at which the size will change from the default (medium) to large. 0 or null value will disable.
breakpointSmall number false 360 The width at which the size will change from small to the default (medium). 0 or null value will disable.
children [ReactReactNode,unknown] false - Content to be wrapped which will be provided with live dimensions and (tshirt) size values.
debounceDelay number false 30 The ms delay before firing resize events / making live updates.
isFullWidth boolean false true If the container will match its parent's width like a block level element (width: 100%).
isFullHeight boolean false false If the container will match its parent's height (height: 100%).
onBreak signature false () => null Callback that fires when the size change crosses a breakpoint threshold (returns new T-Shirt size value).
onResize signature false () => null Callback that fires when the size changes (returns new width + height values).

Usage

<ResizeDetector> is a provider component that implements a simple DOM wrapper element and provides callbacks for resize events and custom hooks with dimension values for a consuming application or child component.

Two callback props are provided (onResize + onBreak), as well a custom hook(useResizeDetector) that a child component can use.

It provides the up-to-date width and height of its root DOM element as well as a simple tshirt size value (small | medium | large) that is determined by two breakpoints, which can be customized or disabled.

Custom Hooks Example

import ResizeDetector, { useResizeDetector } from "@paprika/resize-detector";

function ResizeConsumer() {
  const { width, height } = useResizeDetector();
  return (
    <div>
      {width} x {height}
    </div>
  );
}

function ResizeApp() {
  return (
    <ResizeDetector>
      <ResizeConsumer />
    </ResizeDetector>;
  );
}

Render Prop Example

import ResizeDetector, { useResizeDetector, ResizeDetectorContextValue } from "@paprika/resize-detector";

function ResizeApp() {
  return (
    <ResizeDetector>
      {({ width, height }: ResizeDetectorContextValue) => <div>{width} x {height}</div>}
    </ResizeDetector>;
  );
}

Callback Example

function ResizeApp() {
  const handleBreak = (size) => {
    doSomethingWithSize(size);
  }

  return (
    <ResizeDetector onBreak={handleBreak}>
      <ResizeConsumer />
    </ResizeDetector>;
  );
}

Links

Readme

Keywords

none

Package Sidebar

Install

npm i @paprika/resize-detector

Weekly Downloads

108

Version

2.0.6

License

MIT

Unpacked Size

29.2 kB

Total Files

11

Last publish

Collaborators

  • vkhimich
  • mikrotron
  • jamiek-galvanize
  • allison_cc