A7U

Posted on May 2, 2021 • Updated on Sep 12, 2022

ReactQuill with NextJS

#nextjs #markdown #editor #react

Hey everyone, just wanted to share this with you. So I've been trying to find rich editors that were compatible with NextJS. Couldn't find any but I found a way to get ReactQuill working.

Import dynamic

import dynamic from 'next/dynamic'

After that import ReactQuill using dynamic

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

Now you can easily use it!
Example:

import { useState } from "react";
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';

function App() {
    const [value, setValue] = useState('')
    return(
       <ReactQuill value={value} onChange={setValue}/>
    )
}

export default App;

I hope this helps 😊

Top comments (28)

Amresh Prasad Sinha • Jan 20 '22

Thanks a lot! You saved my time!

Munir Ali Mohammed • Jan 23 '22

Arigato Guzaimas

CY • Jun 30 '21

Thank you! This is very helpful.

Umesh Chaudhary • Aug 20 '21

How do you import ReactQuill modules (quill-image-resizing -module) on the dynamic imports ?

Mobiot Yves André • Aug 20 '22 • Edited

i believe , you made a typpo in the beginning of your post

import dynamic from 'react/dynamic'

(that library don't exist), instead of

import dynamic from 'next/dynamic';

you corrected in your final code

A7U • Sep 12 '22

Thank you for noticing. Fixed!

Yoza Wiratama • May 6 '22

can not use ref for image upload handler

Wendell D. Enc • Aug 8 '22 • Edited

ref does not work with dynamic import. you can use this

dynamic import

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    // eslint-disable-next-line react/display-name
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
  },
  { ssr: false }
);

create ref
const quillRef = useRef(null)

jsx

<QuillNoSSRWrapper
            forwardedRef={quillRef}
            ...
          />

then in image cllback handler you can now access the quill object and range
const quillObj = quillRef?.current?.getEditor();
const range = quillObj?.getSelection();

then append the image url after upload to the editor's current range

quillObj.editor.insertEmbed(range.index, 'image', data?.secure_url);

here the handler:

const quillImageCallback = async () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = async () => {
      const file = input.files ? input.files[0] : null;
      let data = null;
      const formData = new FormData();
      formData.append('upload_preset', 'fixer-upper-v1');

      const quillObj = quillRef?.current?.getEditor();
      const range = quillObj?.getSelection();

      if (file) {
        formData.append('file', file);
        formData.append('resource_type', 'raw');
        formData.append('folder', `- ${fileData?.name}`);

        const responseUpload = await fetch(
          `${process.env.NEXT_PUBLIC_IMAGE_UPLOAD}/upload`,
          { method: 'POST', body: formData }
        );

        data = await responseUpload.json();
        if (data.error) {
          console.error(data.error);
        }

        quillObj.editor.insertEmbed(range.index, 'image', data?.secure_url);
      }
    };
  };

Ivan Farkas • Jan 4 '23 • Edited

Getting an error for forwardedRef
Property 'forwardedRef' does not exist on type '{}'.ts(2339)

return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;

GaminiRainMaker • Apr 5 '23

Same Issue I am facing @ivanfarkas .Did you got any solution to it.

L. Rommy Arbantas • Aug 29 '22

Many thanks for this!! ❤️

Abdulla • Dec 27 '23

When i use on reactquill with nextjs each onchange the whole component re-render how can i resolve this

I have also tried the same the above mention but still the whole component re-render problem persist

Ankit kumar • Apr 16 '22 • Edited

toolbar is appearing twice. i don't know how to fix it.. i am using quill inside form element

Robersom Aquino • Jul 11 '22

Add this CSS in your global style:

.quill > .ql-toolbar:first-child {
display: none !important;
}

Or in your next.config.js
reactStrictMode: false,

MarceloPatropi • May 27 '22

SAme here. Didi you find a solution?

Marco Mesen Campos • Jul 20 '22 • Edited

Simple solution, I guess not the best:

// component:
<Editor value={html} onChange={setHtml} id="html-editor" />

// css
  #html-editor > div:nth-child(1) {
    display: none !important;
  }

I don't think it's the best either, but definitely better than the previous one

export function TextEditor(props: TextEditorProps) {
  const refElement = useRef<HTMLDivElement>(null);
  const [html, setHtml] = useState('The template will be here');

  useEffect(() => {
    if (refElement.current?.firstChild) {
      const children = Array.from(
        refElement.current.firstChild.childNodes
      ) as HTMLElement[];
      const duplicateTooltips = children.filter((el) => {
        return el.classList.contains('ql-toolbar');
      });
      if (duplicateTooltips.length > 1) {
        duplicateTooltips[0].remove();
      }
    }
  }, [refElement.current]);

  return (
    <div ref={refElement}>
      <Editor value={html} onChange={setHtml} />
    </div>
  );
}