Skip to content

Commit 5bc32d7

Browse files
committed
Disable eslint on ts files and update readme layout
1 parent 76190da commit 5bc32d7

File tree

3 files changed

+45
-2
lines changed

3 files changed

+45
-2
lines changed

.eslintignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules/
22
commonjs/
33
coverage/
44
umd/
5-
src/__tests__/typescript/
5+
src/__tests__/typescript/
6+
*.ts

README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<p>&nbsp;</p>
2+
13
<p align='center'>
24
<img src='https://raw.githubusercontent.com/ctrlplusb/react-sizeme/master/assets/logo.png' width='250'/>
35
<p align='center'>Make your React Components aware of their width and/or height!</p>
@@ -41,6 +43,10 @@ function MyComponent({ size }) {
4143
export default withSize()(MyComponent)
4244
```
4345

46+
<p>&nbsp;</p>
47+
48+
---
49+
4450
## TOCs
4551

4652
- [Intro](https://github.com/ctrlplusb/react-sizeme#intro)
@@ -55,18 +61,30 @@ export default withSize()(MyComponent)
5561
- [Server Side Rendering](https://github.com/ctrlplusb/react-sizeme#server-side-rendering)
5662
- [Extreme Appreciation](https://github.com/ctrlplusb/react-sizeme#extreme-appreciation)
5763

64+
<p>&nbsp;</p>
65+
66+
---
67+
5868
## Intro
5969

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

6272
Check out a working demo here: https://react-sizeme.now.sh
6373

74+
<p>&nbsp;</p>
75+
76+
---
77+
6478
## Installation
6579

6680
```javascript
6781
npm install react-sizeme
6882
```
6983

84+
<p>&nbsp;</p>
85+
86+
---
87+
7088
## Configuration
7189

7290
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
106124

107125
> NOTE: You can set this globally. See the docs on first render.
108126
127+
<p>&nbsp;</p>
128+
129+
---
130+
109131
## Component Usage
110132

111133
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
136158
/>
137159
```
138160

161+
<p>&nbsp;</p>
162+
163+
---
164+
139165
## HOC Usage
140166

141167
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 {
214240
}
215241
```
216242

243+
<p>&nbsp;</p>
244+
245+
---
246+
217247
## Under the hood
218248

219249
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
226256

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

259+
<p>&nbsp;</p>
260+
261+
---
262+
229263
## Examples
230264

231265
### Loading different child components based on size
@@ -263,6 +297,10 @@ export default sizeMe({ monitorHeight: true })(MyComponent);
263297

264298
> 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!
265299
300+
<p>&nbsp;</p>
301+
302+
---
303+
266304
## Server Side Rendering
267305

268306
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
284322

285323
If you come up with any clever strategies for this please do come share them with us! :)
286324

325+
<p>&nbsp;</p>
326+
327+
---
328+
287329
## Extreme Appreciation!
288330

289331
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:

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-sizeme",
33
"version": "2.6.9",
4-
"description": "Make your React Components aware of their dimensions and position.",
4+
"description": "Make your React Components aware of their width and/or height!",
55
"license": "MIT",
66
"main": "dist/react-sizeme.js",
77
"types": "react-sizeme.d.ts",

0 commit comments

Comments
 (0)