{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-sizeme"],"cli":null},"imports":["import { SizeMe } from 'react-sizeme';","import { withSize } from 'react-sizeme';","import type { SizeMeOptions } from 'react-sizeme';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}