[Mention Plugin] Usage with react hooks

I have been trying to use the draftjs mention plugin with react hooks but can’t find any reference in the documentation. Appreciate any advice on where went wrong in my code.

import React, { useRef, useState, useEffect } from "react";
import { EditorState } from "draft-js";
import Editor from "draft-js-plugins-editor";
import createMentionPlugin, { defaultSuggestionsFilter } from "draft-js-mention-plugin";
import mentions from "./mentions";

export default function MentionEditor() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [suggestions, setSuggestions] = useState(mentions);
  const editor = useRef(null);

  useEffect(() => {
    editor.current.focus();
  }, [])

  const mentionPlugin = createMentionPlugin();
  const { MentionSuggestions } = mentionPlugin;
  const plugins = [mentionPlugin];

  const onSearchChange = ({ value }) => {
    setSuggestions(defaultSuggestionsFilter(value, mentions))
  };

  return (
    <div style={{ border: "1px solid gray" }}>
      <Editor
        editorState={editorState}
        onChange={editorState => setEditorState(editorState)}
        plugins={plugins}
        ref={editor}
      />
      <MentionSuggestions
        onSearchChange={onSearchChange}
        suggestions={suggestions}
      />
    </div> 
  );
}

[artemplv]

Hi, you need to move this outside of your function:

const mentionPlugin = createMentionPlugin();
const { MentionSuggestions } = mentionPlugin;
const plugins = [mentionPlugin];

You also don’t need editor variable there and ref Editor prop. Additionally import draft-js-mention-plugin/lib/plugin.css so mentions display properly.

[fxOne]

For a hook base solution you can look here: https://github.com/draft-js-plugins/draft-js-plugins/blob/73d5f504ac62ef6c9e206f053e2800b2bf99c058/packages/docs/components/Examples/mention/SimpleMentionEditor/SimpleMentionEditor.tsx