Usage with React?

[teb111]

Please there is nowhere in the documentation that explains usage with react.js

[yojona]

https://github.com/wangzuo/react-medium-editor

[i-am-mani]

You can try this maybe:

import * as React from "react";
import MediumEditor from "medium-editor";
import "medium-editor/dist/css/medium-editor.css";
import "medium-editor/dist/css/themes/default.css";
import classNames from "classnames";

const Article: React.FC = () => {
  const [editor, setEditor] = React.useState<any>();

  const onRefChange = React.useCallback((node) => {
    if (node === null) {
        setEditor(null)
    } else {
      if (editor == null) {
        const et = new MediumEditor(node);
        setEditor(et);
      }
    }
  }, []); // adjust deps

  return (
    <div className="w-full bg-[#21212B] text-white h-[500px] overflow-y-scroll px-4 py-3">
      <div
        className={classNames(
          "w-full h-full prose text-white",
          "prose-headings:text-white ",
          "prose-a:text-[#94C7E9]",
          "focus:outline-none"
        )}
        ref={onRefChange}
      ></div>
    </div>
  );
};
export default Article;