Project 77 of 100 - Local Notes in React with react-quill

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

So I'm half-way through a Youtube tutorial about how to build an Evernote clone with React and Firebase when I realize (a) the video is really outdated with breaking code changes since it was released and (b) we are using a super cool npm package for React that I'd like to learn the modern way to implement. So I looked up the updated documentation, and learned how to do it the new-fashioned way.

The package is called react-quill and I had been looking for something like this for a while. It's a pre-built text editor component with styling and tons of customizability. The documentation shows the best way to install and include it in a create-react-app project:

npm install react-quill

then

import React, { useState } from "react";
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyComponent() {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue}/>
  );
}

It's as easy as that to have a nice code editor in your project! There are a ton of different built-in props and ways to extend it, so I didn't get to use everything, but I get a feel for how one could use it in larger projects and I implemented a way to use it with your browser's local storage, which is also quite useful.

Here was my configuration of the Quill component:

function App() {
  const [editorBody,setEditorBody] = useState('')

  ...

return (
...
  <main>
    <ReactQuill theme="snow" value={editorBody} onChange={setEditorBody} />
  </main>
)

Aside from that, all I do is use useEffect to load in past notes from storage when the component mounts. And I used some vanilla Javascript to save the note in local storage and the time in UTC format when the user closes the page. That way, anyone who uses this website will have their own local notes application they can bookmark.

Other resources used in this project:

1. MDN docs on local storage
2. "Replacing React Lifecycle Methods with Hooks" (great article)
3. MDN docs on the window unload event
4. This handy solution on converting a date string to a user's local time

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.