https://github.com/zalando-stups/react-automatic-width
Automatically sets `width` property on child components
https://github.com/zalando-stups/react-automatic-width
listener react resize-observer
Last synced: 11 months ago
JSON representation
Automatically sets `width` property on child components
- Host: GitHub
- URL: https://github.com/zalando-stups/react-automatic-width
- Owner: zalando-stups
- License: apache-2.0
- Created: 2015-10-26T12:10:37.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-04-10T09:26:57.000Z (about 7 years ago)
- Last Synced: 2024-11-11T21:05:03.201Z (over 1 year ago)
- Topics: listener, react, resize-observer
- Language: JavaScript
- Size: 72.3 KB
- Stars: 10
- Watchers: 17
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-automatic-width
[](https://travis-ci.org/zalando/react-automatic-width) [](https://coveralls.io/github/zalando/react-automatic-width?branch=master)
So, you found those cool components like [fixed-data-table](https://facebook.github.io/fixed-data-table/) and [react-d3-components](https://github.com/codesuki/react-d3-components) that do whatever you want, with just one problem: They only work on fixed width! You care about responsiveness and different display sizes. You want variable width! **HULK SMASH!**
One solution: Just wrap it in `AutoWidth`, so that this:
~~~ jsx
import D3 from 'react-d3-components';
// ;_;
~~~
Can work like this:
~~~ jsx
import D3 from 'react-d3-components';
import AutoWidth from '@zalando/react-automatic-width';
{/* ^_^ */}
~~~
react-automatic-width is a React component that automatically sets `width` property on child components. It works out-of-the-box and accepts any property you throw at it. This way, you can use classes and media queries for the autowidth container.
It does its job by attaching a listener to the `resize` event of `window`. In it, react-automatic-width reads the current width of its DOM node and sets this as the `width` property on its children. Since it creates an event listener *every* time it's used, you might want to reconsider when you have a lot of components that need to be wrapped separately. [`react-dimensions`](https://github.com/digidem/react-dimensions) might then be useful to you as it offers the option to use [`element-resize-event`](https://github.com/KyleAMathews/element-resize-event/) underneath (using `requestAnimationFrame`).
It's currently not under active development because the codebase is tiny and works. If appropriate, it will be updated to accomodate future React versions.
## Installation & Usage
Install react-automatic-width with:
npm i -S @zalando/react-automatic-width
Then load it however you want (example: ES6):
import AutoWidth from '@zalando/react-automatic-width'
Finally, omit the `width` property on your component and wrap it in `AutoWidth`:
~~~ jsx
~~~
Optionally, you can set up the debouncing rate in milliseconds (default is 100)
~~~ jsx
~~~
## Issues/Contributing
This project welcomes contributions from the community. Here are some issues and areas where we could use some help:
* Uses `clientWidth` because that worked in Chrome forty-something. Might be funky in your browser. PRs welcome.
* Not clear what should happen if the window is resized while the container is not displayed. Currently zero-widths just get ignored. Drop a line via the Issues tracker if you have some ideas.
## License
Apache 2.0