Validating React-Quill with react hook form

This is not an issue, it is more of a contribution and can be closed as soon as it is filed, I just wanted to contribute how I managed to validate Quill with React Hook Form, I could not find a readily available solution. According to the React hook website validation can be done in different ways but none of them worked out of the box, I kept encountering the split('-') error, I ended up with the below solution

     <Controller
                                    control={control}
                                    name="description"
                                    rules={{
                                        validate: value => wordCounter(value) >= 10 || "Enter at least 10 words in the description"
                                    }}
                                    error={errors.description}
                                    render={({ onChange, onBlur, value }) => (
                                        <ReactQuill
                                            theme="snow"
                                            onChange={(description, delta, source, editor) => onChange(description)}
                                            value={value || ''}

                                        />
                                    )}
                                />

If value is set as value={value} you will encounter this error Error: You are passing the deltaobject from theonChangeevent back asvalue. You most probably want editor.getContents() instead. See: https://github.com/zenoamaro/react-quill#using-deltas

[hrahimi270]

@aubryll what is the solution on this?

[aubryll]

I have left a comment

Hi, @aubryll this solution isn’t working for me. Can you please check this issue? https://stackoverflow.com/questions/67983695/how-to-validate-react-quill-with-react-hook-form-and-yup

I have left a comment on your stackoverflow question my username is Nemo.