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 Updates
APA

A7U | Sciencx (2021-05-02T17:32:34+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 ,<https://www.scien.cx/2021/05/02/reactquill-with-nextjs/>
VANCOUVER
A7U | Sciencx - » ReactQuill with NextJS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/02/reactquill-with-nextjs/
CHICAGO
" » ReactQuill with NextJS." A7U | Sciencx - Accessed . 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: ]
rf:citation
» ReactQuill with NextJS | A7U | Sciencx | https://www.scien.cx/2021/05/02/reactquill-with-nextjs/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.