Initial commit

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+continuation_indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+quote_type = single
+spaces_around_operators = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "parser": "babel-eslint",
+  "extends": "eslint-config-wildbit",
+  "env": {
+    "browser": true,
+    "mocha": true
+  },
+  "plugins": [
+    "import"
+  ],
+  "settings": {
+    "import/resolve": {
+      "moduleDirectory": ["node_modules"]
+    }
+  }
+}

README.md

@@ -1,2 +1,40 @@
-# react-element-resize-detector
-Wrapper component that detects element resize and passes new dimensions down the tree. Based on [element-resize-detector](https://github.com/wnr/element-resize-detector)
+# react-container-dimensions
+Wrapper component that detects parent (container) element resize and passes new dimensions down the 
+tree. Based on [element-resize-detector]
+(https://github.com/wnr/element-resize-detector)
+
+`npm install --save react-container-dimensions`
+
+It is especially useful when you create components with dimensions that change over 
+time and you want to explicitely pass the container dimensions to the children. For example, SVG 
+visualization needs to be updated in order to fit into container.
+
+## How is it different from ...
+
+*It does not create a new element in the DOM but relies on the `parentNode` which must be present.* 
+This means it doesn't require its own CSS to do the job and leaves it up to you. So, basically, 
+it acts as a middleware to pass _your_ styled component dimensions to your children components.
+
+## Usage
+
+1. Wrap your existing components. Children component will recieve `width` and `height` as props.
+
+```jsx
+<ContainerDimensions>
+    <MyComponent/>
+</ContainerDimensions>    
+```
+
+2. Use a function to pass width or height explicitely or do some calculation. Function callback will be called with an object `{ width: number, height: number }` as an argument.
+
+```jsx
+<ContainerDimensions children={ ({ height }) => <MyComponent height={height}/> }/>
+```
+
+## Other similar projects:
+
+* https://github.com/maslianok/react-resize-detector/blob/master/package.json
+* https://github.com/Xananax/react-size
+* https://github.com/joeybaker/react-element-query
+
+and a few others...

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "react-container-dimensions",
+  "version": "1.0.0",
+  "description": "Wrapper component that detects element resize and passes new dimensions down the tree. Based on [element-resize-detector](https://github.com/wnr/element-resize-detector)",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "babel --presets=react,es2015,stage-1 src --out-dir lib",
+    "clean": "rimraf lib",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
+    "prepublish": "npm run lint && npm run clean && npm run build",
+    "test": "NODE_ENV=test mocha --compilers js:babel/register --recursive",
+    "test:watch": "npm test -- --watch",
+    "eslint-staged": "eslint-staged"
+  },
+  "pre-commit": [
+    "eslint-staged"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/okonet/react-container-dimensions.git"
+  },
+  "directories": {
+    "example": "example"
+  },
+  "keywords": [],
+  "author": "Andrey Okonetchnikov <andrey@okonet.ru>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/okonet/react-container-dimensions/issues"
+  },
+  "homepage": "https://github.com/okonet/react-container-dimensions#readme",
+  "dependencies": {
+    "element-resize-detector": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
+  },
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-eslint": "^6.0.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
+    "eslint": "^2.5.3",
+    "eslint-config-wildbit": "^2.0.0",
+    "eslint-plugin-import": "^1.4.0",
+    "lint-staged": "^0.1.1",
+    "pre-commit": "^1.1.2",
+    "react": "^0.14.8",
+    "react-dom": "^0.14.8",
+    "rimraf": "^2.5.2"
+  }
+}

src/index.js

@@ -0,0 +1,49 @@
+import React, { Component, PropTypes, Children } from 'react'
+import ReactDOM from 'react-dom'
+import elementResizeDetectorMaker from 'element-resize-detector'
+
+export default class ContainerDimensions extends Component {
+
+    static propTypes = {
+        children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired
+    }
+
+    state = {
+        width: 0,
+        height: 0
+    }
+
+    componentDidMount() {
+        this.elementResizeDetector = elementResizeDetectorMaker({
+            strategy: 'scroll'
+        })
+        this.onResize()
+        this.elementResizeDetector.listenTo(ReactDOM.findDOMNode(this).parentNode, this.onResize)
+    }
+
+    componentWillReceiveProps() {
+        this.onResize()
+    }
+
+    componentWillUnmount() {
+        this.elementResizeDetector.removeListener(
+            ReactDOM.findDOMNode(this).parentNode, this.onResize
+        )
+    }
+
+    onResize = () => {
+        const container = ReactDOM.findDOMNode(this).parentNode
+        this.setState({
+            width: container.offsetWidth,
+            height: container.offsetHeight
+        })
+    }
+
+    render() {
+        if (typeof this.props.children === 'function') {
+            const renderedChildren = this.props.children(this.state)
+            return renderedChildren && Children.only(renderedChildren)
+        }
+        return Children.only(React.cloneElement(this.props.children, this.state))
+    }
+}