diff --git a/README.md b/README.md index 4de80cf..de8a9ee 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,8 @@ or as an [ES7 class decorator](https://github.com/wycats/javascript-decorators) - `options.className` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)=** Control the class name set on the wrapper `
` - `options.elementResize` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)=** Set true to watch the wrapper `div` for changes in size which are not a result of window resizing - e.g. changes to the flexbox and other layout. (optional, default `false`) + - `options.withRef` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)=** Set true to enable accessing the wrapped instance with + [getWrappedInstance()](https://github.com/digidem/react-dimensions#getwrappedinstance). Disable this when wrapping stateless components, as they cannot use `refs`. (optional, default `true`) **Examples** diff --git a/example.jsx b/example.jsx index 7c78736..08b7224 100644 --- a/example.jsx +++ b/example.jsx @@ -17,7 +17,7 @@ class MyComponent extends React.Component { }}> {`${this.props.containerWidth}px x ${this.props.containerHeight}px`}
- ) + ) } } diff --git a/index.jsx b/index.jsx index 35f3ae5..6cc4faa 100644 --- a/index.jsx +++ b/index.jsx @@ -77,7 +77,8 @@ module.exports = function Dimensions ({ getDimensions = defaultGetDimensions, debounce = 0, debounceOpts = {}, - elementResize = false + elementResize = false, + withRef = true } = {}) { return (ComposedComponent) => { return class DimensionsHOC extends React.Component { @@ -152,6 +153,9 @@ module.exports = function Dimensions ({ * @return {object} The rendered React component **/ getWrappedInstance () { + if (!withRef) { + console.warn('You need to enable the `withRef` option to access the wrapped instance') + } return this.refs.wrappedInstance } @@ -173,7 +177,7 @@ module.exports = function Dimensions ({ {...this.state} {...this.props} updateDimensions={this.updateDimensions} - ref='wrappedInstance' + ref={withRef && 'wrappedInstance'} /> }