How to use RichUtils with React Hooks

Here is an example on how to use RichUtils in Draft.js. The code translated to React Hooks:

jsx
import React, { useEffect, useState }   from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';

const MyEditor = () => {

    const [editorState, setEditorState] = useState(EditorState.createEmpty());

    const boldText = (e) => {
        
        // onMouseDown and e.preventDefault because editor losses focus if you use onClick
        e.preventDefault();
        
        let nextState = RichUtils.toggleInlineStyle(editorState, 'BOLD');
        
        setEditorState(nextState);
        
    }
    
    return (
        <div className = 'MyEditor'>
            <button onMouseDown = {boldText}>Bold</button>
            <Editor
                editorState = {editorState}
                onChange = {editorState => setEditorState(editorState)}
            />
        </div>
    );
}

export default MyEditor;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.