Permalink
Browse files

Initial commit

  • Loading branch information...
1 parent 4e7597c commit 346aac0a8fc7e44ab22ab7273efc1d065a36b118 @okonet committed Mar 30, 2016
Showing with 180 additions and 2 deletions.
  1. +20 −0 .editorconfig
  2. +16 −0 .eslintrc
  3. +40 −2 README.md
  4. +55 −0 package.json
  5. +49 −0 src/index.js
View
@@ -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
View
@@ -0,0 +1,16 @@
+{
+ "parser": "babel-eslint",
+ "extends": "eslint-config-wildbit",
+ "env": {
+ "browser": true,
+ "mocha": true
+ },
+ "plugins": [
+ "import"
+ ],
+ "settings": {
+ "import/resolve": {
+ "moduleDirectory": ["node_modules"]
+ }
+ }
+}
View
@@ -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...
View
@@ -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"
+ }
+}
View
@@ -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))
+ }
+}

0 comments on commit 346aac0

Please sign in to comment.