Skip to content

Commit

Permalink
remove non-hook handlers
Browse files Browse the repository at this point in the history
  • Loading branch information
@maslianok
maslianok committed Dec 23, 2023
1 parent 9f37f20 commit 2341d33
Show file tree
Hide file tree
Showing 6 changed files with 13 additions and 505 deletions.
184 changes: 10 additions & 174 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
# Handle element resizes like it's 2023!
# Handle element resizes like it's 2024!

<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">

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

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.
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.

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

🐼 Written in TypeScript

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

🐠 Used by <a href="https://github.com/maslianok/react-resize-detector/network/dependents" target="__blank">90k repositories</a>

🦄 Generating <a href="https://npmtrends.com/react-resize-detector" target="__blank">70M+ downloads/year</a>
🦄 Produces <a href="https://npmtrends.com/react-resize-detector" target="__blank">100 million downloads annually</a>

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

<i>TypeScript-lovers notice: starting from v6.0.0 you may safely remove `@types/react-resize-detector` from you deps list.</i>

## Do you really need this library?
## Is it necessary for you to use this library?

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).
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).

<details><summary>Example</summary>

Expand Down Expand Up @@ -63,15 +59,7 @@ npm i react-resize-detector
yarn add react-resize-detector
```

and

```jsx
import { useResizeDetector } from 'react-resize-detector';
```

## Examples

#### 1. React hook
## Example

```jsx
import { useResizeDetector } from 'react-resize-detector';
Expand All @@ -82,7 +70,7 @@ const CustomComponent = () => {
};
```

<details><summary>With props</summary>
#### With props

```js
import { useResizeDetector } from 'react-resize-detector';
Expand All @@ -103,9 +91,9 @@ const CustomComponent = () => {
};
```

</details>
#### With custom ref

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

```js
import { useResizeDetector } from 'react-resize-detector';
Expand All @@ -117,158 +105,6 @@ const CustomComponent = () => {
};
```

</details>

#### 2. HOC pattern

```jsx
import { withResizeDetector } from 'react-resize-detector';

const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;

export default withResizeDetector(CustomComponent);
```

#### 3. Child Function Pattern

```jsx
import ReactResizeDetector from 'react-resize-detector';

// ...

<ReactResizeDetector handleWidth handleHeight>
{({ width, height }) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>;
```

<details><summary>Full example (Class Component)</summary>

```jsx
import React, { Component } from 'react';
import { withResizeDetector } from 'react-resize-detector';

const containerStyles = {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};

class AdaptiveComponent extends Component {
state = {
color: 'red'
};

componentDidUpdate(prevProps) {
const { width } = this.props;

if (width !== prevProps.width) {
this.setState({
color: width > 500 ? 'coral' : 'aqua'
});
}
}

render() {
const { width, height } = this.props;
const { color } = this.state;
return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
}
}

const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);

const App = () => {
return (
<div>
<p>The rectangle changes color based on its width</p>
<AdaptiveWithDetector />
</div>
);
};

export default App;
```

</details>

<details><summary>Full example (Functional Component)</summary>

```jsx
import React, { useState, useEffect } from 'react';
import { withResizeDetector } from 'react-resize-detector';

const containerStyles = {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};

const AdaptiveComponent = ({ width, height }) => {
const [color, setColor] = useState('red');

useEffect(() => {
setColor(width > 500 ? 'coral' : 'aqua');
}, [width]);

return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
};

const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);

const App = () => {
return (
<div>
<p>The rectangle changes color based on its width</p>
<AdaptiveWithDetector />
</div>
);
};

export default App;
```

</details>

<br/>

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.

## Refs

_The below explanation doesn't apply to `useResizeDetector`_

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.

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`

<details><summary>HOC pattern example</summary>

```jsx
import { withResizeDetector } from 'react-resize-detector';

const CustomComponent = ({ width, height, targetRef }) => <div ref={targetRef}>{`${width}x${height}`}</div>;

export default withResizeDetector(CustomComponent);
```

</details>

<details><summary>Child Function Pattern example</summary>

```jsx
import ReactResizeDetector from 'react-resize-detector';

// ...

<ReactResizeDetector handleWidth handleHeight>
{({ width, height, targetRef }) => <div ref={targetRef}>{`${width}x${height}`}</div>}
</ReactResizeDetector>;
```

</details>

## API

| Prop | Type | Description | Default |
Expand Down
Loading

0 comments on commit 2341d33

Please sign in to comment.