max-length support in react quill : the values on UI update even if the state has the old value
Author: raksha-scbCreated Jul 12, 2019Updated Jul 17, 2025
I want to implement max-length in my editor. If the length exceeds the max-length then i do not update the value in state. Why does not react quill stop updating the UI when the state value is not updated? codepen link
https://codepen.io/anon/pen/Prgjoz
code is somewhat like this: /*
- Simple editor component that takes placeholder text as a prop */ class Editor extends React.Component { constructor (props) { super(props) this.state = { editorHtml: '', theme: 'snow' } this.handleChange = this.handleChange.bind(this) }
handleChange (html) { if (html.length < 30 ){ this.setState({ editorHtml: html }); } }
handleThemeChange (newTheme) { if (newTheme === "core") newTheme = null; this.setState({ theme: newTheme }) }
render () { return (
<ReactQuill
theme={this.state.theme}
onChange={this.handleChange}
value={this.state.editorHtml}
modules={Editor.modules}
formats={Editor.formats}
bounds={'.app'}
placeholder={this.props.placeholder}
/>
)
}
}
Theme
<select onChange={(e) =>
this.handleThemeChange(e.target.value)}>
Source: zenoamaro/react-quill