react-sizeme

library3.0.2jsnpmunverified

react-sizeme is a React library that enables components to be aware of their own rendered width and/or height, facilitating component-level responsive design. The current stable version is 3.0.2, actively maintained with recent updates including React 18 support. It differentiates itself by offering both render prop (`SizeMe`) and Higher-Order Component (`withSize`) patterns, ensuring flexibility for various component structures. It boasts performance, extensive browser support, a tiny bundle size, and compatibility with both functional and class components. The library provides configurable options for monitoring dimensions, refresh rates, and refresh modes (throttle/debounce) to optimize performance.

web-framework

npm install react-sizeme

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SIZEME

react-sizeme

web-frameworkjavascriptv3.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SizeMe

✓ import { SizeMe } from 'react-sizeme';

✗ const { SizeMe } = require('react-sizeme');

SizeMe is a render prop component. For TypeScript, types are included by default.

withSize

✓ import { withSize } from 'react-sizeme';

✗ const withSize = require('react-sizeme').withSize;

withSize is a Higher-Order Component (HOC). Apply it to your component to inject size props.

SizeMeOptions

✓ import type { SizeMeOptions } from 'react-sizeme';

Import types explicitly for configuration options when using TypeScript.

Demonstrates both the Higher-Order Component (HOC) and Render Prop patterns for `react-sizeme`, allowing components to respond dynamically to changes in their rendered dimensions, with configurable refresh options.

import React from 'react'; import { SizeMe, SizeMeOptions } from 'react-sizeme'; interface MyComponentProps { title: string; size: { width?: number; height?: number; }; } // Functional component using HOC const MyHOCComponent: React.FC<MyComponentProps> = ({ title, size }) => ( <div> <h2>{title} (HOC)</h2> <p>Width: {size.width ?? 'N/A'}px</p> <p>Height: {size.height ?? 'N/A'}px</p> </div> ); const SizedMyHOCComponent = withSize()<{ title: string }>(MyHOCComponent); // Functional component using Render Prop const MyRenderPropComponent: React.FC = () => { const sizeMeConfig: SizeMeOptions = { monitorHeight: true, // Monitor height as well refreshRate: 50, refreshMode: 'debounce' }; return ( <SizeMe monitorHeight refreshRate={50} refreshMode="debounce"> {({ size }) => ( <div> <h2>My Render Prop Component</h2> <p>Width: {size.width ?? 'N/A'}px</p> <p>Height: {size.height ?? 'N/A'}px</p> {size.width && size.width < 400 && <p>I'm small!</p>} {size.width && size.width >= 400 && <p>I'm wide!</p>} </div> )} </SizeMe> ); }; export default function App() { return ( <> <h1>react-sizeme Demo</h1> <div style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '20px', resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}> <SizedMyHOCComponent title="Resizable Box 1" /> </div> <div style={{ border: '1px solid #ccc', padding: '10px', resize: 'both', overflow: 'auto', maxWidth: '100%', height: '200px' }}> <MyRenderPropComponent /> </div> </> ); }

Debug

Known issues

breakingVersion 3.0.1 removed 'position code', which was an experimental feature. If your application relied on `position` properties being passed to your components, this will be a breaking change.

fix

Remove any reliance on the `position` property from your component's props. The library no longer provides this information.

affects: >=3.0.1

gotchaBy default, `monitorHeight` is set to `false`. Components will only react to width changes unless explicitly configured to monitor height.

fix

To monitor height, ensure you set `monitorHeight: true` in your `SizeMe` component or `withSize` HOC options, e.g., `<SizeMe monitorHeight>{...}</SizeMe>` or `withSize({ monitorHeight: true })(MyComponent)`.

affects: >=1.0.0

breakingVersion 3.0.2 introduced support for React 18 and removed specific peer dependencies for `react` and `react-dom` to simplify dependency management. While backwards compatible with React 17 and earlier (>=0.14.0), it's important to be aware of the shift.

fix

Ensure your project is using `react` and `react-dom` versions compatible with `react-sizeme` (recommended: React 17 or 18). No explicit peer dependency installation is needed for `react-sizeme` itself in v3.0.2+, but `react` and `react-dom` must be installed in your project.

affects: >=3.0.2

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'width')

The `size` prop or `size` object from the render prop might be `undefined` during initial render or Server-Side Rendering (SSR) before the client-side measurement occurs.

fix

Add defensive checks for `size` and its properties. For example, `size?.width ?? 'N/A'` or ensure your component handles an `undefined` `size` gracefully, possibly by rendering a placeholder.

My component is not resizing even when its container changes size.

This is often due to `monitorWidth` or `monitorHeight` being set incorrectly or the `refreshRate`/`refreshMode` options preventing frequent updates.

fix

Verify that `monitorWidth` (default: true) and `monitorHeight` (default: false) are configured as desired. Adjust `refreshRate` (minimum 16ms) and `refreshMode` ('throttle' or 'debounce') to ensure updates are occurring with appropriate frequency.

Upgrade

Version history

3.0.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React application. Updated to support React 17 in v3.0.1 and React 18 in v3.0.2.

react-domrequiredPeer dependency required for any React application rendering to the DOM. Updated to support React 17 in v3.0.1 and React 18 in v3.0.2.

prop-typesoptionalRuntime dependency for type checking in non-TypeScript environments. Was moved to dependencies in v2.6.11 from devDependencies.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ctrlplusb/react-sizeme ↗

packagehttps://www.npmjs.com/package/react-sizeme ↗