ReactQuill with NextJS

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 ‘react/dynamic’

Aft…


This content originally appeared on DEV Community and was authored by A7U

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 'react/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 ?


This content originally appeared on DEV Community and was authored by A7U


Print Share Comment Cite Upload Translate
APA
A7U | Sciencx (2022-10-02T14:16:33+00:00) » ReactQuill with NextJS. Retrieved from https://www.scien.cx/2021/05/02/reactquill-with-nextjs/.
MLA
" » ReactQuill with NextJS." A7U | Sciencx - Sunday May 2, 2021, https://www.scien.cx/2021/05/02/reactquill-with-nextjs/
HARVARD
A7U | Sciencx Sunday May 2, 2021 » ReactQuill with NextJS., viewed 2022-10-02T14:16:33+00:00,<https://www.scien.cx/2021/05/02/reactquill-with-nextjs/>
VANCOUVER
A7U | Sciencx - » ReactQuill with NextJS. [Internet]. [Accessed 2022-10-02T14:16:33+00:00]. Available from: https://www.scien.cx/2021/05/02/reactquill-with-nextjs/
CHICAGO
" » ReactQuill with NextJS." A7U | Sciencx - Accessed 2022-10-02T14:16:33+00:00. https://www.scien.cx/2021/05/02/reactquill-with-nextjs/
IEEE
" » ReactQuill with NextJS." A7U | Sciencx [Online]. Available: https://www.scien.cx/2021/05/02/reactquill-with-nextjs/. [Accessed: 2022-10-02T14:16:33+00:00]
rf:citation
» ReactQuill with NextJS | A7U | Sciencx | https://www.scien.cx/2021/05/02/reactquill-with-nextjs/ | 2022-10-02T14:16:33+00:00
https://github.com/addpipe/simple-recorderjs-demo