{"id":15216,"library":"react-sizeme","title":"React Component Size Awareness","description":"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.","status":"active","version":"3.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/ctrlplusb/react-sizeme","tags":["javascript","library","typescript"],"install":[{"cmd":"npm install react-sizeme","lang":"bash","label":"npm"},{"cmd":"yarn add react-sizeme","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sizeme","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React application. Updated to support React 17 in v3.0.1 and React 18 in v3.0.2.","package":"react","optional":false},{"reason":"Peer 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.","package":"react-dom","optional":false},{"reason":"Runtime dependency for type checking in non-TypeScript environments. Was moved to dependencies in v2.6.11 from devDependencies.","package":"prop-types","optional":true}],"imports":[{"note":"SizeMe is a render prop component. For TypeScript, types are included by default.","wrong":"const { SizeMe } = require('react-sizeme');","symbol":"SizeMe","correct":"import { SizeMe } from 'react-sizeme';"},{"note":"withSize is a Higher-Order Component (HOC). Apply it to your component to inject size props.","wrong":"const withSize = require('react-sizeme').withSize;","symbol":"withSize","correct":"import { withSize } from 'react-sizeme';"},{"note":"Import types explicitly for configuration options when using TypeScript.","symbol":"SizeMeOptions","correct":"import type { SizeMeOptions } from 'react-sizeme';"}],"quickstart":{"code":"import React from 'react';\nimport { SizeMe, SizeMeOptions } from 'react-sizeme';\n\ninterface MyComponentProps {\n  title: string;\n  size: { width?: number; height?: number; };\n}\n\n// Functional component using HOC\nconst MyHOCComponent: React.FC<MyComponentProps> = ({ title, size }) => (\n  <div>\n    <h2>{title} (HOC)</h2>\n    <p>Width: {size.width ?? 'N/A'}px</p>\n    <p>Height: {size.height ?? 'N/A'}px</p>\n  </div>\n);\n\nconst SizedMyHOCComponent = withSize()<{ title: string }>(MyHOCComponent);\n\n// Functional component using Render Prop\nconst MyRenderPropComponent: React.FC = () => {\n  const sizeMeConfig: SizeMeOptions = {\n    monitorHeight: true, // Monitor height as well\n    refreshRate: 50,\n    refreshMode: 'debounce'\n  };\n\n  return (\n    <SizeMe monitorHeight refreshRate={50} refreshMode=\"debounce\">\n      {({ size }) => (\n        <div>\n          <h2>My Render Prop Component</h2>\n          <p>Width: {size.width ?? 'N/A'}px</p>\n          <p>Height: {size.height ?? 'N/A'}px</p>\n          {size.width && size.width < 400 && <p>I'm small!</p>}\n          {size.width && size.width >= 400 && <p>I'm wide!</p>}\n        </div>\n      )}\n    </SizeMe>\n  );\n};\n\nexport default function App() {\n  return (\n    <>\n      <h1>react-sizeme Demo</h1>\n      <div style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '20px', resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>\n        <SizedMyHOCComponent title=\"Resizable Box 1\" />\n      </div>\n      <div style={{ border: '1px solid #ccc', padding: '10px', resize: 'both', overflow: 'auto', maxWidth: '100%', height: '200px' }}>\n        <MyRenderPropComponent />\n      </div>\n    </>\n  );\n}\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Remove any reliance on the `position` property from your component's props. The library no longer provides this information.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.1"},{"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)`.","message":"By default, `monitorHeight` is set to `false`. Components will only react to width changes unless explicitly configured to monitor height.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.2"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'width')"},{"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.","cause":"This is often due to `monitorWidth` or `monitorHeight` being set incorrectly or the `refreshRate`/`refreshMode` options preventing frequent updates.","error":"My component is not resizing even when its container changes size."}],"ecosystem":"npm"}