https://github.com/two-n/react-sizeable

React Component for dynamically computed DOM size
https://github.com/two-n/react-sizeable

Last synced: 17 days ago
JSON representation

React Component for dynamically computed DOM size

• Host: GitHub
• URL: https://github.com/two-n/react-sizeable
• Owner: two-n
• License: mit
• Created: 2017-02-21T18:42:45.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-14T22:37:41.000Z (over 7 years ago)
• Last Synced: 2024-04-25T19:00:19.011Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sizeable

React component that passes the computed size of its parent (i.e. width only, by default) down to its children. Assumes block-rendered contents, and that sizing depends on window size only.

`npm install --save react-sizeable` (or `yarn add react-sizeable`)

```jsx

import Sizeable from 'react-sizeable'

  

```

`` element will receive `width` as a prop (unless disabled), as well as `height` (if enabled) and `size`: `[width, height]` (if both enabled).

Alternative usage:

```jsx

{({ width }) =>

  


}


{({ width, height }) =>

  


}


{({ width, height }) =>

  


}


{({ size }) =>

  


}

```


The `width` and `height` props can also be numbers or functions of the DOM node, which defaults (if enabled) to the `offsetWidth` and `offsetHeight` properties.

A `component` prop can also be specified (e.g. `"div"` or any React component), in which case the children will be wrapped, which allows for multiple children (or alternatively, a function returning an array). Arbitrary extra props will also be passed through to this wrapping element.

For added flexibility, the component can be extended with a condition for whether or not to resize. For instance, to only update the size if the height changes:

```jsx

class HeightTriggeredSizeable extends Sizeable {

  shouldResize(previous, current) {

    return current.height !== previous.height

  }

}

```