1 | # Handle element resizes like it's 2019!
|
2 |
|
3 | Nowadays browsers have started to support element resize handling natively using [ResizeObservers](https://wicg.github.io/ResizeObserver/). We use this feature (with a [polyfill](https://github.com/que-etc/resize-observer-polyfill)) to help you handle element resizes in React.
|
4 |
|
5 | ## Demo
|
6 |
|
7 | #### [Live demo](http://maslianok.github.io/react-resize-detector/)
|
8 |
|
9 | Local demo:
|
10 |
|
11 | ```
|
12 | git clone https://github.com/maslianok/react-resize-detector.git
|
13 | cd react-resize-detector/examples
|
14 | npm i && npm start
|
15 | ```
|
16 |
|
17 | ## Installation
|
18 |
|
19 | ```
|
20 | npm i react-resize-detector
|
21 | // OR
|
22 | yarn add react-resize-detector
|
23 | ```
|
24 |
|
25 | ## Examples
|
26 |
|
27 | #### 1. Callback Pattern
|
28 |
|
29 | ```jsx
|
30 | import React, { PureComponent } from 'react';
|
31 | import { render } from 'react-dom';
|
32 | import ReactResizeDetector from 'react-resize-detector';
|
33 |
|
34 | class App extends PureComponent {
|
35 | render() {
|
36 | return (
|
37 | <div>
|
38 | ...
|
39 | <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
|
40 | </div>
|
41 | );
|
42 | }
|
43 |
|
44 | onResize = () => {
|
45 | ...
|
46 | }
|
47 | }
|
48 |
|
49 | render(<App />, document.getElementById('root'));
|
50 | ```
|
51 |
|
52 | #### 2. Child Function Pattern
|
53 |
|
54 | ```jsx
|
55 | <ReactResizeDetector handleWidth handleHeight>
|
56 | {({ width, height }) => <div>{`${width}x${height}`}</div>}
|
57 | </ReactResizeDetector>
|
58 | ```
|
59 |
|
60 | #### 3. Child Component Pattern
|
61 |
|
62 | ```jsx
|
63 | const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
|
64 |
|
65 | // ...
|
66 |
|
67 | <ReactResizeDetector handleWidth handleHeight>
|
68 | <CustomComponent />
|
69 | </ReactResizeDetector>;
|
70 | ```
|
71 |
|
72 | #### 4. HOC pattern
|
73 |
|
74 | ```jsx
|
75 | import { withResizeDetector } from 'react-resize-detector';
|
76 |
|
77 | const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
|
78 |
|
79 | export default withResizeDetector(CustomComponent);
|
80 | ```
|
81 |
|
82 | #### 5. Render prop pattern
|
83 |
|
84 | ```jsx
|
85 | <ResizeDetector
|
86 | handleWidth
|
87 | handleHeight
|
88 | render={({ width, height }) => (
|
89 | <div>
|
90 | Width:{width}, Height:{height}
|
91 | </div>
|
92 | )}
|
93 | />
|
94 | ```
|
95 |
|
96 | ## API
|
97 |
|
98 | | Prop | Type | Description | Default |
|
99 | | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
|
100 | | onResize | Func | Function that will be invoked with `width` and `height` arguments | `undefined` |
|
101 | | handleWidth | Bool | Trigger `onResize` on width change | `false` |
|
102 | | handleHeight | Bool | Trigger `onResize` on height change | `false` |
|
103 | | skipOnMount | Bool | Do not trigger onResize when a component mounts | `false` |
|
104 | | refreshMode | String | Possible values: `throttle` and `debounce` See [lodash docs](https://lodash.com/docs#debounce) for more information. `undefined` - callback will be fired for every frame | `undefined` |
|
105 | | refreshRate | Number | Use this in conjunction with `refreshMode`. Important! It's a numeric prop so set it accordingly, e.g. `refreshRate={500}` | `1000` |
|
106 | | refreshOptions | Object | Use this in conjunction with `refreshMode`. An object in shape of `{ leading: bool, trailing: bool }`. Please refer to [lodash's docs](https://lodash.com/docs/4.17.11#throttle) for more info | `undefined` |
|
107 | | querySelector | String | A selector of an element to observe. You can use this property to attach resize-observer to any DOM element. Please refer to the [querySelector docs](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) | `undefined` |
|
108 | | targetDomEl | DOM element | A DOM element to observe. By default it's a parent element in relation to the ReactResizeDetector component. But you can pass any DOM element to observe. This property is omitted when you pass `querySelector` | `undefined` |
|
109 | | nodeType | node | Valid only for a [callback-pattern](https://github.com/maslianok/react-resize-detector#1-callback-pattern). Ignored for other render types. Set resize-detector's node type. You can pass any valid React node: string with node's name or element. Can be useful when you need to handle table's or paragraph's resizes | `div` |
|
110 |
|
111 | ## License
|
112 |
|
113 | MIT
|