diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/README.md | 1 | ||||
-rw-r--r-- | src/TextareaAutosize.js | 24 |
2 files changed, 20 insertions, 5 deletions
diff --git a/src/README.md b/src/README.md index a963a92..85affb9 100644 --- a/src/README.md +++ b/src/README.md @@ -8,3 +8,4 @@ A light replacement for built-in `<textarea />` component which automatically ad | **onResize** | <code>Function</code> | | *optional*. Called whenever the textarea resizes | | **rows** | <code>Number</code> | | *optional*. Minimum number of visible rows | | **maxRows** | <code>Number</code> | | *optional*. Maximum number of visible rows | +| **innerRef** | <code>Function</code> | | *optional*. Called with the ref to the DOM node | diff --git a/src/TextareaAutosize.js b/src/TextareaAutosize.js index 1cd2377..04a3251 100644 --- a/src/TextareaAutosize.js +++ b/src/TextareaAutosize.js @@ -12,6 +12,7 @@ const UPDATE = 'autosize:update', * @param onResize - called whenever the textarea resizes * @param rows - minimum number of visible rows * @param maxRows - maximum number of visible rows + * @param innerRef - called with the ref to the DOM node */ export default class TextareaAutosize extends React.Component { @@ -105,23 +106,35 @@ export default class TextareaAutosize extends React.Component { this.props.onChange && this.props.onChange(e); } + saveDOMNodeRef = ref => { + const { innerRef } = this.props; + + if (innerRef) { + innerRef(ref); + } + + this.textarea = ref; + } + getLocals = () => { const { - props: { onResize, maxRows, onChange, style, ...props }, // eslint-disable-line no-unused-vars - state: { maxHeight } + props: { onResize, maxRows, onChange, style, innerRef, ...props }, // eslint-disable-line no-unused-vars + state: { maxHeight }, + saveDOMNodeRef } = this; return { ...props, + saveDOMNodeRef, style: maxHeight ? { ...style, maxHeight } : style, onChange: this.onChange }; } render() { - const { children, ...locals } = this.getLocals(); + const { children, saveDOMNodeRef, ...locals } = this.getLocals(); return ( - <textarea {...locals} ref={(ref) => { this.textarea = ref; }}> + <textarea {...locals} ref={saveDOMNodeRef}> {children} </textarea> ); @@ -138,5 +151,6 @@ export default class TextareaAutosize extends React.Component { TextareaAutosize.propTypes = { rows: PropTypes.number, maxRows: PropTypes.number, - onResize: PropTypes.func + onResize: PropTypes.func, + innerRef: PropTypes.func }; |