Local Notes in React with react-quill

The package is called react-quill 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

Thank you