Quilljs is a Javascript editor for enriching the web applications. The toolkit was used by companies like, LinkedIn, Slab etc.
How to use Quill in React
For React we can use community libraries such as react-quill. Let’s setup a React project and install the dependencies.
npx create-react-app myapp
yarn add react-quill quill
We can use the the <ReactQuill/> component render the editor as follows.
import ReactQuill from "react-quill";
import React, { Component } from "react";
import "react-quill/dist/quill.snow.css";
function MyComponent() {
const [value, setValue] = React.useState("");
return (
<div>
<ReactQuill theme="snow" value={value} onChange={setValue} />
</div>
);
}
The styling (CSS) may not work properly, for that import the CSS class provided by Quill.
import "quill/dist/quill.snow.css";
A live version of the project can be found at sandbox , in case required.
Links
- Quill without toolbar
- Quilljs mention snippet
- Create Quill RichText editor using react-quill
- React-quill double instance fix
- How to get HTML from Remirror editor in Reactjs
- How to get state as JSON from Remirror editor in Reactjs
- How to get content from Quilljs in React
- Create a TinyMCE Rich Text Editor in React
- Create a Slate Rich Text Editor in React
- Create a Material-UI Rich Text Editor in React