React-Draft-WYSIWYG with React-Hook-Form

When you using react-draft-wysiwyg in your form, you cannot handle it as uncontrolled input. With react-hook-form, you only using react-draft-wysiwyg with Controller because react-draft-wysiwyg have properties is difference primitive input props {value, default, onChange, onBlur, name, ref}

Solution

I have created the library @tonz/react-draft-wysiwyg-input which wrapper react-draft-wysiwyg and tranform it’s behaviours similar to html input with {value, defaultValue, onChange, onBlur, ref, name}. Then we can work with it similar html input:

Get Tonz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

import {RichTextInput} from '@tonz/react-draft-wysiwyg-input'

import '@tonz/react-draft-wysiwyg-input/style.css';

<RichTextInput disabled={disabled} {...register('desc')} />

Conclusion

“Almost complex form control components (Antd, MUI, DraftJs, …) using in form can transform to similar html input behaviours”

You can view code at https://github.com/tannvdts/react-draft-wysiwyg-input-workspace, then you can convert almost complex form controls to similar html input.