{"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 = ({ title, size }) => (\n
\n

{title} (HOC)

\n

Width: {size.width ?? 'N/A'}px

\n

Height: {size.height ?? 'N/A'}px

\n
\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 \n {({ size }) => (\n
\n

My Render Prop Component

\n

Width: {size.width ?? 'N/A'}px

\n

Height: {size.height ?? 'N/A'}px

\n {size.width && size.width < 400 &&

I'm small!

}\n {size.width && size.width >= 400 &&

I'm wide!

}\n
\n )}\n \n );\n};\n\nexport default function App() {\n return (\n <>\n

react-sizeme Demo

\n
\n \n
\n
\n \n
\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., `{...}` 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,"search_vec":"'18':44 '3.0.2':36 'activ':37 'and/or':23 'awar':4,17 'boast':69 'browser':72 'bundl':76 'class':84 'compat':79 'compon':2,14,27,59,66,85 'component-level':26 'configur':89 'current':32 'design':30 'differenti':47 'dimens':93 'enabl':13 'ensur':62 'extens':71 'facilit':25 'flexibl':63 'function':82 'height':24 'higher':57 'higher-ord':56 'includ':42 'javascript':103 'level':28 'librari':11,87,104 'maintain':38 'mode':98 'monitor':92 'offer':50 'optim':101 'option':90 'order':58 'pattern':61 'perform':70,102 'prop':53 'provid':88 'rate':95 'react':1,6,10,43 'react-sizem':5 'recent':40 'refresh':94,97 'render':21,52 'respons':29 'size':3,77 'sizem':7,54 'stabl':33 'structur':67 'support':45,73 'throttle/debounce':99 'tini':75 'typescript':105 'updat':41 'various':65 'version':34 'width':22 'withsiz':60","created_at":"2026-04-21T04:49:44.488976+00:00","updated_at":"2026-04-21T04:49:44.488976+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/ctrlplusb/react-sizeme","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-sizeme","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}