Navigate back to the homepage

Using React Quill with Zeit Next.js

Aryan Jabbari
April 20th, 2019 · 1 min read

I decided to use React Quill for a Next.js application I am working on. My goal is to add a Medium-like text editor to my application. I will use the Cloning Medium with Parchment blog post as a guide to achieve my goal. However, for now, let’s get started with adding React Quill to a Next.js project.

Styles

Styling React Quill involves importing a stylesheet. That was rather easy after finding this comment on Github. I created a Meta component where I would interact with next/head and injected that into a Page component that surrounds my application in _app.tsx. I stripped a lot of the innards of the following files for brevity but it should work:

Meta.tsx

1import Head from "next/head";
2
3const Meta = () => (
4 <Head>
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <meta charSet="utf-8" />
7 <link rel="stylesheet" href="//cdn.quilljs.com/1.2.6/quill.snow.css" />
8 </Head>
9);
10
11export default Meta;

Page.tsx

1import React, { Component } from "react";
2import Meta from "./Meta";
3
4export default class Page extends Component {
5 render() {
6 return (
7 <>
8 <Meta />
9 {this.props.children}
10 </>
11 );
12 }
13}

_app.tsx

1import App, { Container, NextAppContext } from "next/app";
2import Page from "../components/Page";
3
4class MyApp extends App {
5 static async getInitialProps({ Component, ctx }: NextAppContext) {
6 const pageProps = Component.getInitialProps
7 ? await Component.getInitialProps(ctx)
8 : {};
9 // this exposes the query to the user
10 pageProps.query = ctx.query;
11 return { pageProps };
12 }
13
14 render() {
15 const { Component, pageProps } = this.props;
16 return (
17 <Container>
18 <Page>
19 <Component {...pageProps} />
20 </Page>
21 </Container>
22 );
23 }
24}
25
26export default MyApp;

Server-Side Rendering

I had to account for Next.js’ use of server-side rendering (SSR) when adding React Quill to my project since quill.js is tightly coupled (read: heavily reliant on) the DOM. I found a wonderful comment on a GitHub issue that explained exactly what to do. With this, my simple text input became the following:

TitleInput.tsx

1import { Component } from "react";
2
3type TitleInputProps = {
4 postTitle: string;
5 setPostTitle: (value: string) => void;
6};
7
8export default class TitleInput extends Component<TitleInputProps> {
9 ReactQuill: any;
10 constructor(props: TitleInputProps) {
11 super(props);
12 if (typeof window !== "undefined") {
13 this.ReactQuill = require("react-quill");
14 }
15 }
16
17 render() {
18 const ReactQuill = this.ReactQuill;
19 const { postTitle, setPostTitle } = this.props;
20 return typeof window !== "undefined" && ReactQuill ? (
21 <label>
22 Title
23 <ReactQuill
24 value={postTitle}
25 onChange={(content: string) => setPostTitle(content)}
26 />
27 </label>
28 ) : null;
29 }
30}

This results in a slight flicker in the application but it’ll do for the time being.

With that, React Quill should be successfully added to the project. Hopefully I will return with a blog installment about how I successfully managed to make my Quill look like the Medium text editor.

📧 Join my email list and get notified about new content

Stay updated with all my blog posts and future randomness!

More articles from The WebDev Coach

System Design: Tinder

I recently watched Gaurav Sen 's video on System Design: Designing Tinder . Below are notes that I took while watching the video. Instead…

April 19th, 2019 · 3 min read

How to get Started in Web Development

Capture Your Why Ironically enough, you’ve already begun your journey into web development. You decided that enough is enough and it’s time…

January 20th, 2019 · 2 min read
© 2018–2019 The WebDev Coach
Link to $https://twitter.com/aryanjabbariLink to $https://www.youtube.com/c/thewebdevcoachLink to $https://github.com/AryanJ-NYCLink to $https://www.linkedin.com/in/aryanjabbari