npm package: @paprika/resize-detector
Description: A wrapper that provides debounced updates of its dimensions.
Author: @paprika
Latest version: 2.0.7

<!-- start: Autogenerated - do not modify -->

# @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).                            |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## 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

```jsx
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

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

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

#### Callback Example

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

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/utilities-resizedetector--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/ResizeDetector/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/resize-detector%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/ResizeDetector/CHANGELOG.md)