You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Give your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered.
61
71
62
72
Check out a working demo here: https://react-sizeme.now.sh
63
73
74
+
<p> </p>
75
+
76
+
---
77
+
64
78
## Installation
65
79
66
80
```javascript
67
81
npm install react-sizeme
68
82
```
69
83
84
+
<p> </p>
85
+
86
+
---
87
+
70
88
## Configuration
71
89
72
90
The following configuration options are available. Please see the usage docs for how to pass these configuration values into either the [component](#component-usage) or [higher order function](#hoc-usage).
@@ -106,6 +124,10 @@ The following configuration options are available. Please see the usage docs for
106
124
107
125
> NOTE: You can set this globally. See the docs on first render.
108
126
127
+
<p> </p>
128
+
129
+
---
130
+
109
131
## Component Usage
110
132
111
133
We provide a "render props pattern" based component. You can import it like so:
@@ -136,6 +158,10 @@ To provide [configuration](#configuration) you simply add any customisation as p
136
158
/>
137
159
```
138
160
161
+
<p> </p>
162
+
163
+
---
164
+
139
165
## HOC Usage
140
166
141
167
We provide you with a higher order component function called `withSize`. You can import it like so:
@@ -214,6 +240,10 @@ class ParentComponent extends React.Component {
214
240
}
215
241
```
216
242
243
+
<p> </p>
244
+
245
+
---
246
+
217
247
## Under the hood
218
248
219
249
It can be useful to understand the rendering workflow should you wish to debug any issues we may be having.
@@ -226,6 +256,10 @@ So the first dimensions that are passed to your component may not be "correct" d
226
256
227
257
Should you wish to avoid the render of a placeholder and have an eager render of your component then you can use the `noPlaceholder` configuration option. Using this configuration value your component will be rendered directly, however, the `size` prop may contain `undefined` for width and height until your component completes its first render.
228
258
259
+
<p> </p>
260
+
261
+
---
262
+
229
263
## Examples
230
264
231
265
### Loading different child components based on size
> EXTRA POINTS! Combine the above with a code splitting API (e.g. Webpack's System.import) to avoid unnecessary code downloads for your clients. Zing!
265
299
300
+
<p> </p>
301
+
302
+
---
303
+
266
304
## Server Side Rendering
267
305
268
306
Okay, I am gonna be up front here and tell you that using this library in an SSR context is most likely a bad idea. If you insist on doing so you then you should take the time to make yourself fully aware of any possible repercussions you application may face.
@@ -284,6 +322,10 @@ It is up to you to decide how you would like to initially render your component
284
322
285
323
If you come up with any clever strategies for this please do come share them with us! :)
286
324
325
+
<p> </p>
326
+
327
+
---
328
+
287
329
## Extreme Appreciation!
288
330
289
331
We make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkle-heart:
0 commit comments