📖 documentation

Author: prayerslayer

README.md

@@ -1,10 +1,36 @@
 # react-automatic-width
 
-Reacts on window.onResize and sets its current width as property on its children. Use this to keep components such as [fixed-data-table](https://facebook.github.io/fixed-data-table/) or [react-d3-components](https://github.com/codesuki/react-d3-components) responsive.
+So you found those cool components that do what you want, but they work on fixed with ([fixed-data-table](https://facebook.github.io/fixed-data-table/) or [react-d3-components](https://github.com/codesuki/react-d3-components) for instance).
 
-# Usage
+~~~ jsx
+import D3 from 'react-d3-components';
 
-**TODO**
+<D3.BarChart
+    width={500} /> // :(
+~~~
+
+You care about responsiveness and different display sizes! You want variable width! HULK SMASH!
+
+Solution: Just wrap it in `AutoWidth`.
+
+~~~ jsx
+import D3 from 'react-d3-components';
+import AutoWidth from 'react-automatic-width';
+
+<AutoWidth>
+    <D3.BarChart /> {/* ^_^ */}
+</AutoWidth>
+~~~
+
+# How?
+
+It attaches a listener to `resize` event of `window`. In it, the component reads the current width of its DOM node and sets this as `width` property on its children.
+
+# Issues
+
+* Uses `addEventListener`, so no IE8 currently. PRs welcome.
+* Uses `clientWidth` because that worked on my current Chrome. Might be funky in your browser. PRs welcome.
+* Not clear what should happen if window is resized while container is invisible. Currently zero-widths just get ignored.
 
 # License
 

src/react-automatic-width.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
 
 class AutomaticWidth extends React.Component {
-    constructor(props) {
+    constructor() {
         super();
         this.state = {
             listener: null,
-            width: props.initialWidth || 1000
+            width: 0
         };
     }
 
      _resizeHandler() {
-        let dom = this.refs.autowidthWrapper.getDOMNode();
-        if (dom.clientWidth !== this.state.width) {
+        let dom = this.refs.autowidthWrapper.getDOMNode(),
+            {clientWidth} = dom;
+        if (clientWidth !== this.state.width && clientWidth > 0) {
             this.setState({
-                width: dom.clientWidth
+                width: clientWidth
             });
         }
     }
@@ -41,6 +42,11 @@ class AutomaticWidth extends React.Component {
                 </div>;
     }
 }
-AutomaticWidth.displayName='Automatic Width';
+AutomaticWidth.displayName = 'AutomaticWidth';
+AutomaticWidth.propTypes = {
+    children: React.PropTypes.oneOf([
+        React.PropTypes.array,
+        React.PropTypes.object
+    ])
+};
 export default AutomaticWidth;
-