How to display React quill content - Next.js

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 (
		<div>
			<ReactQuill
				theme="snow"
				placeholder="Write something"
				onChange={onChange}
				defaultValue={''}
			/>
			<div>
				Your input text
				<div dangerouslySetInnerHTML={{__html: content}} />
			</div>
		</div>
	);
}

The page will look like this

Conclusion

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