Skip to content

Commit 2341d33

Browse files
maslianokmaslianok
committed
remove non-hook handlers
1 parent 9f37f20 commit 2341d33

File tree

6 files changed

+13
-505
lines changed

6 files changed

+13
-505
lines changed

‎README.md

+10-174
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
1-
# Handle element resizes like it's 2023!
1+
# Handle element resizes like it's 2024!
22

33
<img src="https://img.shields.io/npm/dm/react-resize-detector?style=flat-square"> <img src="https://badgen.net/bundlephobia/minzip/react-resize-detector?style=flat-square"> <img src="https://badgen.net/bundlephobia/tree-shaking/react-resize-detector?style=flat-square">
44

55
#### [Live demo](http://maslianok.github.io/react-resize-detector/)
66

7-
Nowadays browsers support element resize handling natively using [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). The library uses these observers to help you handle element resizes in React.
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.
88

99
🐥 Tiny <a href="https://bundlephobia.com/result?p=react-resize-detector" target="__blank">~3kb</a>
1010

1111
🐼 Written in TypeScript
1212

13-
🦁 Supports Function and Class Components
13+
🐠 Used by <a href="https://github.com/maslianok/react-resize-detector/network/dependents" target="__blank">160k repositories</a>
1414

15-
🐠 Used by <a href="https://github.com/maslianok/react-resize-detector/network/dependents" target="__blank">90k repositories</a>
16-
17-
🦄 Generating <a href="https://npmtrends.com/react-resize-detector" target="__blank">70M+ downloads/year</a>
15+
🦄 Produces <a href="https://npmtrends.com/react-resize-detector" target="__blank">100 million downloads annually</a>
1816

1917
No `window.resize` listeners! No timeouts! No 👑 viruses! :)
2018

21-
<i>TypeScript-lovers notice: starting from v6.0.0 you may safely remove `@types/react-resize-detector` from you deps list.</i>
22-
23-
## Do you really need this library?
19+
## Is it necessary for you to use this library?
2420

25-
Container queries now work in [all major browsers](https://caniuse.com/css-container-queries). It's very likely you can resolve your problem using [pure CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries).
21+
Container queries now work in [all major browsers](https://caniuse.com/css-container-queries). It's very likely you can solve your task using [pure CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries).
2622

2723
<details><summary>Example</summary>
2824

@@ -63,15 +59,7 @@ npm i react-resize-detector
6359
yarn add react-resize-detector
6460
```
6561

66-
and
67-
68-
```jsx
69-
import { useResizeDetector } from 'react-resize-detector';
70-
```
71-
72-
## Examples
73-
74-
#### 1. React hook
62+
## Example
7563

7664
```jsx
7765
import { useResizeDetector } from 'react-resize-detector';
@@ -82,7 +70,7 @@ const CustomComponent = () => {
8270
};
8371
```
8472

85-
<details><summary>With props</summary>
73+
#### With props
8674

8775
```js
8876
import { useResizeDetector } from 'react-resize-detector';
@@ -103,9 +91,9 @@ const CustomComponent = () => {
10391
};
10492
```
10593

106-
</details>
94+
#### With custom ref
10795

108-
<details><summary>With custom ref. _not recommended, may have some unexpected behaviour if you dynamically mount/unmount the observed element_</summary>
96+
_It's not advised to use this approach, as dynamically mounting and unmounting the observed element could lead to unexpected behavior._
10997

11098
```js
11199
import { useResizeDetector } from 'react-resize-detector';
@@ -117,158 +105,6 @@ const CustomComponent = () => {
117105
};
118106
```
119107

120-
</details>
121-
122-
#### 2. HOC pattern
123-
124-
```jsx
125-
import { withResizeDetector } from 'react-resize-detector';
126-
127-
const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
128-
129-
export default withResizeDetector(CustomComponent);
130-
```
131-
132-
#### 3. Child Function Pattern
133-
134-
```jsx
135-
import ReactResizeDetector from 'react-resize-detector';
136-
137-
// ...
138-
139-
<ReactResizeDetector handleWidth handleHeight>
140-
{({ width, height }) => <div>{`${width}x${height}`}</div>}
141-
</ReactResizeDetector>;
142-
```
143-
144-
<details><summary>Full example (Class Component)</summary>
145-
146-
```jsx
147-
import React, { Component } from 'react';
148-
import { withResizeDetector } from 'react-resize-detector';
149-
150-
const containerStyles = {
151-
height: '100vh',
152-
display: 'flex',
153-
alignItems: 'center',
154-
justifyContent: 'center'
155-
};
156-
157-
class AdaptiveComponent extends Component {
158-
state = {
159-
color: 'red'
160-
};
161-
162-
componentDidUpdate(prevProps) {
163-
const { width } = this.props;
164-
165-
if (width !== prevProps.width) {
166-
this.setState({
167-
color: width > 500 ? 'coral' : 'aqua'
168-
});
169-
}
170-
}
171-
172-
render() {
173-
const { width, height } = this.props;
174-
const { color } = this.state;
175-
return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
176-
}
177-
}
178-
179-
const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);
180-
181-
const App = () => {
182-
return (
183-
<div>
184-
<p>The rectangle changes color based on its width</p>
185-
<AdaptiveWithDetector />
186-
</div>
187-
);
188-
};
189-
190-
export default App;
191-
```
192-
193-
</details>
194-
195-
<details><summary>Full example (Functional Component)</summary>
196-
197-
```jsx
198-
import React, { useState, useEffect } from 'react';
199-
import { withResizeDetector } from 'react-resize-detector';
200-
201-
const containerStyles = {
202-
height: '100vh',
203-
display: 'flex',
204-
alignItems: 'center',
205-
justifyContent: 'center'
206-
};
207-
208-
const AdaptiveComponent = ({ width, height }) => {
209-
const [color, setColor] = useState('red');
210-
211-
useEffect(() => {
212-
setColor(width > 500 ? 'coral' : 'aqua');
213-
}, [width]);
214-
215-
return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
216-
};
217-
218-
const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);
219-
220-
const App = () => {
221-
return (
222-
<div>
223-
<p>The rectangle changes color based on its width</p>
224-
<AdaptiveWithDetector />
225-
</div>
226-
);
227-
};
228-
229-
export default App;
230-
```
231-
232-
</details>
233-
234-
<br/>
235-
236-
We still support [other ways](https://github.com/maslianok/react-resize-detector/tree/v4.2.1#examples) to work with this library, but in the future consider using the ones described above. Please let me know if the examples above don't fit your needs.
237-
238-
## Refs
239-
240-
_The below explanation doesn't apply to `useResizeDetector`_
241-
242-
The library is trying to be smart and does not add any extra DOM elements to not break your layouts. That's why we use [`findDOMNode`](https://react.dev/reference/react-dom/findDOMNode) method to find and attach listeners to the existing DOM elements. Unfortunately, this method has been deprecated and throws a warning in StrictMode.
243-
244-
For those who want to avoid this warning, we are introducing an additional property - `targetRef`. You have to set this prop as a `ref` of your target DOM element and the library will use this reference instead of searching the DOM element with help of `findDOMNode`
245-
246-
<details><summary>HOC pattern example</summary>
247-
248-
```jsx
249-
import { withResizeDetector } from 'react-resize-detector';
250-
251-
const CustomComponent = ({ width, height, targetRef }) => <div ref={targetRef}>{`${width}x${height}`}</div>;
252-
253-
export default withResizeDetector(CustomComponent);
254-
```
255-
256-
</details>
257-
258-
<details><summary>Child Function Pattern example</summary>
259-
260-
```jsx
261-
import ReactResizeDetector from 'react-resize-detector';
262-
263-
// ...
264-
265-
<ReactResizeDetector handleWidth handleHeight>
266-
{({ width, height, targetRef }) => <div ref={targetRef}>{`${width}x${height}`}</div>}
267-
</ReactResizeDetector>;
268-
```
269-
270-
</details>
271-
272108
## API
273109

274110
| Prop | Type | Description | Default |

0 commit comments

Comments
 (0)