How to display React quill content - Next.js

Cover Image for How to display React quill content - Next.js
Ali Bentaleb

To display react quill content in your page, use React element dangerouslySetInnerHTML and pass in the content to the attribute __html

Get content from react quill

You need first to get your content from your react quill editor, and we have shown how to correctly configure it in Next.js in this article.

Next, we need to use the method onChange provided by React quill to track any changes in our editor

Our page will look like :

import {useState} from 'react';
import dynamic from 'next/dynamic';

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

export default function Page() {
	const [content, setContent] = useState('');
	const onChange = (text) => setContent(text);

	return (
				placeholder="Write something"
				Your input text
				<div dangerouslySetInnerHTML={{__html: content}} />

The page will look like this react quill display content


We have seen how to display react quill content using React dangerouslySetInnerHTML

Disable Server side rendering ...How to solve ReferenceError: d...

More interesting articles