Skip to content

Commit

Permalink
Disable eslint on ts files and update readme layout
Browse files Browse the repository at this point in the history
  • Loading branch information
ctrlplusb committed Oct 21, 2019
1 parent 76190da commit 5bc32d7
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 2 deletions.
3 changes: 2 additions & 1 deletion .eslintignore
Expand Up @@ -2,4 +2,5 @@ node_modules/
commonjs/
coverage/
umd/
src/__tests__/typescript/
src/__tests__/typescript/
*.ts
42 changes: 42 additions & 0 deletions README.md
@@ -1,3 +1,5 @@
<p>&nbsp;</p>

<p align='center'>
<img src='https://raw.githubusercontent.com/ctrlplusb/react-sizeme/master/assets/logo.png' width='250'/>
<p align='center'>Make your React Components aware of their width and/or height!</p>
Expand Down Expand Up @@ -41,6 +43,10 @@ function MyComponent({ size }) {
export default withSize()(MyComponent)
```

<p>&nbsp;</p>

---

## TOCs

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

<p>&nbsp;</p>

---

## Intro

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.

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

<p>&nbsp;</p>

---

## Installation

```javascript
npm install react-sizeme
```

<p>&nbsp;</p>

---

## Configuration

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).
Expand Down Expand Up @@ -106,6 +124,10 @@ The following configuration options are available. Please see the usage docs for

> NOTE: You can set this globally. See the docs on first render.
<p>&nbsp;</p>

---

## Component Usage

We provide a "render props pattern" based component. You can import it like so:
Expand Down Expand Up @@ -136,6 +158,10 @@ To provide [configuration](#configuration) you simply add any customisation as p
/>
```

<p>&nbsp;</p>

---

## HOC Usage

We provide you with a higher order component function called `withSize`. You can import it like so:
Expand Down Expand Up @@ -214,6 +240,10 @@ class ParentComponent extends React.Component {
}
```

<p>&nbsp;</p>

---

## Under the hood

It can be useful to understand the rendering workflow should you wish to debug any issues we may be having.
Expand All @@ -226,6 +256,10 @@ So the first dimensions that are passed to your component may not be "correct" d

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.

<p>&nbsp;</p>

---

## Examples

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

> 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!
<p>&nbsp;</p>

---

## Server Side Rendering

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.
Expand All @@ -284,6 +322,10 @@ It is up to you to decide how you would like to initially render your component

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

<p>&nbsp;</p>

---

## Extreme Appreciation!

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:
2 changes: 1 addition & 1 deletion package.json
@@ -1,7 +1,7 @@
{
"name": "react-sizeme",
"version": "2.6.9",
"description": "Make your React Components aware of their dimensions and position.",
"description": "Make your React Components aware of their width and/or height!",
"license": "MIT",
"main": "dist/react-sizeme.js",
"types": "react-sizeme.d.ts",
Expand Down

0 comments on commit 5bc32d7

Please sign in to comment.