The solution appears to be the experimental (as of 11/2019) ResizeObserver class. It's currently implemented in Chrome, Firefox, and Opera, but not in Edge or Safari.
export default class MyInput extends PureComponent {
constructor(props) {
super(props);
this.state = {
autosize: true,
canResize: true,
value: ''
};
this.inputRef = react.createRef();
}
componentDidMount() {
if (window.ResizeObserver) {
const input = this.inputRef.current,
observer = new ResizeObserver(() => {
this.setState({ autosize: false });
observer.disconnect();
});
observer.observe(input);
} else {
this.setState({ canResize: false });
}
}
// ...
render() {
return <textarea {...} ref={this.inputRef}
style={{ resize: this.state.canResize ? 'vertical' : 'none' }} />
}
}
