react-quillでwysiwygを作ろう

完成形

npmでインストール

npm install react-quill --save

雛形を用意

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyComponent() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

カスタマイズをしたい場合はtoolbarを使用

https://quilljs.com/docs/modules/toolbar/

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});