28 |
31 | Card title
29 |Card content
30 |
90 |
91 | Card resized {count} times
92 |
93 |
94 | Width:{' '}
95 |
96 |
98 | , Height:{' '}
99 |
100 |
102 |
103 |
104 | Rendered: {renderedRef.current}
105 |
106 | {dimensions.inner.width}px
97 | {dimensions.inner.height}px
101 | {dimensions.border.left}px
88 | {dimensions.padding.left}px
94 | {dimensions.inner.width}px
100 | {dimensions.padding.right}px
106 | {dimensions.border.right}px
112 | {dimensions.border.top}px
132 | {dimensions.padding.top}px
138 | {dimensions.inner.height}px
144 | {dimensions.padding.bottom}px
150 | {dimensions.border.bottom}px
156 | 
4 |
5 | #### [Live demo](https://react-resize-detector.vercel.app/)
6 |
7 | Modern browsers now have native support for detecting element size changes through [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). This library utilizes ResizeObservers to facilitate managing element size changes in React applications.
8 |
9 | 🐥 Tiny ~2kb
10 |
11 | 🐼 Written in TypeScript
12 |
13 | 🐠 Used by 170k repositories
14 |
15 | 🦄 Produces 100 million downloads annually
16 |
17 | No `window.resize` listeners! No timeouts!
18 |
19 | ## Should you use this library?
20 |
21 | **Consider CSS Container Queries first!** They now work in [all major browsers](https://caniuse.com/css-container-queries) and might solve your use case with pure CSS.
22 |
23 | CSS Container Queries Example
24 | 25 | ```html 26 |
27 |
32 | ```
33 |
34 | ```css
35 | .post {
36 | container-type: inline-size;
37 | }
38 |
39 | /* Default heading styles for the card title */
40 | .card h2 {
41 | font-size: 1em;
42 | }
43 |
44 | /* If the container is larger than 700px */
45 | @container (min-width: 700px) {
46 | .card h2 {
47 | font-size: 2em;
48 | }
49 | }
50 | ```
51 |
52 | {`${width}x${height}`}
;
81 | };
82 | ```
83 |
84 | ### With Resize Callback
85 |
86 | ```tsx
87 | import { useCallback } from 'react';
88 | import { useResizeDetector, OnResizeCallback } from 'react-resize-detector';
89 |
90 | const CustomComponent = () => {
91 | const onResize: OnResizeCallback = useCallback((payload) => {
92 | if (payload.width !== null && payload.height !== null) {
93 | console.log('Dimensions:', payload.width, payload.height);
94 | } else {
95 | console.log('Element unmounted');
96 | }
97 | }, []);
98 |
99 | const { width, height, ref } = useResizeDetector{`${width}x${height}`}
;
104 | };
105 | ```
106 |
107 | ### With External Ref (Advanced)
108 |
109 | _It's not advised to use this approach, as dynamically mounting and unmounting the observed element could lead to unexpected behavior._
110 |
111 | ```tsx
112 | import { useRef } from 'react';
113 | import { useResizeDetector } from 'react-resize-detector';
114 |
115 | const CustomComponent = () => {
116 | const targetRef = useRef{`${width}x${height}`}
;
119 | };
120 | ```
121 |
122 | ## API Reference
123 |
124 | ### Hook Signature
125 |
126 | ```typescript
127 | useResizeDetector
165 |
168 | );
169 | };
170 | ```
171 |
172 | ### Chart Resizing
173 |
174 | ```jsx
175 | import { useResizeDetector } from 'react-resize-detector';
176 | import { useEffect, useRef } from 'react';
177 |
178 | const Chart = () => {
179 | const chartRef = useRef(null);
180 | const { width, height, ref } = useResizeDetector({
181 | refreshMode: 'debounce',
182 | refreshRate: 100,
183 | });
184 |
185 | useEffect(() => {
186 | if (width && height && chartRef.current) {
187 | // Redraw chart with new dimensions
188 | redrawChart(chartRef.current, width, height);
189 | }
190 | }, [width, height]);
191 |
192 | return ;
193 | };
194 | ```
195 |
196 | ### Performance Optimization
197 |
198 | ```jsx
199 | import { useResizeDetector } from 'react-resize-detector';
200 |
201 | const OptimizedComponent = () => {
202 | const { width, height, ref } = useResizeDetector({
203 | // Only track width changes
204 | handleHeight: false,
205 | // Debounce rapid changes
206 | refreshMode: 'debounce',
207 | refreshRate: 150,
208 | // Skip initial mount calculation
209 | skipOnMount: true,
210 | // Use border-box for more accurate measurements
211 | observerOptions: { box: 'border-box' },
212 | });
213 |
214 | return Responsive Card
166 |Width: {width}px
167 |Optimized: {width}px wide
;
215 | };
216 | ```
217 |
218 | ### Disable Re-renders
219 |
220 | ```jsx
221 | import { useResizeDetector } from 'react-resize-detector';
222 |
223 | const NonRerenderingComponent = () => {
224 | const { ref } = useResizeDetector({
225 | // Disable re-renders triggered by the hook
226 | disableRerender: true,
227 | // Handle resize events through callback only
228 | onResize: ({ width, height }) => {
229 | // Update external state or perform side effects
230 | // without causing component re-renders
231 | console.log('Resized to:', width, height);
232 | },
233 | });
234 |
235 | return This component won't re-render on resize
;
236 | };
237 | ```
238 |
239 | ## Browser Support
240 |
241 | - ✅ Chrome 64+
242 | - ✅ Firefox 69+
243 | - ✅ Safari 13.1+
244 | - ✅ Edge 79+
245 |
246 | For older browsers, consider using a [ResizeObserver polyfill](https://github.com/que-etc/resize-observer-polyfill).
247 |
248 | ## Testing
249 |
250 | ```jsx
251 | const { ResizeObserver } = window;
252 |
253 | beforeEach(() => {
254 | delete window.ResizeObserver;
255 | // Mock ResizeObserver for tests
256 | window.ResizeObserver = jest.fn().mockImplementation(() => ({
257 | observe: jest.fn(),
258 | unobserve: jest.fn(),
259 | disconnect: jest.fn(),
260 | }));
261 | });
262 |
263 | afterEach(() => {
264 | window.ResizeObserver = ResizeObserver;
265 | jest.restoreAllMocks();
266 | });
267 | ```
268 |
269 | ## Performance Tips
270 |
271 | 1. **Use `handleWidth`/`handleHeight: false`** if you only need one dimension
272 | 2. **Enable `skipOnMount: true`** if you don't need initial measurements
273 | 3. **Use `debounce` or `throttle`** for expensive resize handlers
274 | 4. **Specify `observerOptions.box`** for consistent measurements
275 |
276 | ## License
277 |
278 | MIT
279 |
280 | ## ❤️ Support
281 |
282 | Show us some love and STAR ⭐ the project if you find it useful
283 |
--------------------------------------------------------------------------------
/playground/src/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 |
3 | import {
4 | Button,
5 | Code,
6 | Flex,
7 | Heading,
8 | Link,
9 | Tabs,
10 | Text,
11 | Theme,
12 | RadioCards,
13 | Switch,
14 | Spinner,
15 | ScrollArea,
16 | Badge,
17 | Table,
18 | Tooltip,
19 | Callout,
20 | } from '@radix-ui/themes';
21 | import { Github, MessageCircleQuestion, Rocket, WandSparkles } from 'lucide-react';
22 |
23 | import { Box, RefreshModeType, useDemoContext } from './context';
24 | import { Snippet } from './Snippet';
25 |
26 | export const Sidebar = () => {
27 | const {
28 | box,
29 | setBox,
30 | refreshMode,
31 | setRefreshMode,
32 | handleHeight,
33 | setHandleHeight,
34 | handleWidth,
35 | setHandleWidth,
36 | isLoading,
37 | setIsLoading,
38 | disableRerender,
39 | setDisableRerender,
40 | } = useDemoContext();
41 |
42 | const toggleLoading = useCallback(() => {
43 | setIsLoading(true);
44 | setTimeout(() => setIsLoading(false), 1000);
45 | }, []);
46 |
47 | return (
48 |