Integrating React QuillJs with React Hook Form

Arnaud F. — Fri, 14 Jun 2024 13:10:29 +0000

Quilljs is a free, open-source library that lets developers easily add rich text editing capabilities to their web applications. It provides a familiar WYSIWYG (What You See Is What You Get) editing experience, similar to popular word processors, allowing users to format text, add images, and create interactive content. It's also known for being customizable, so developers can tailor it to their specific needs.

While React Quill was once a popular option for adding rich text editing to React applications, there are a couple reasons why it might not be the most relevant choice these days:

Out of Date: React Quill hasn't had major updates in over two years. This raises concerns about compatibility with newer React versions and security risks.
Quill v2 Issues: There's a new version of Quill (v2), but React Quill doesn't seem to work with it smoothly, potentially causing problems.
Outdated Techniques: React Quill might use older methods for handling the web page structure (DOM manipulation) that aren't ideal for modern React development.

There's a new React library called React Quilljs that's actively maintained and integrates well with React projects.

I'll show you how to use React Quilljs with React Hook Form in a TypeScript project. While it might not be the ultimate solution, it works!

Install dependencies

npm install react-quilljs quill
npm install -D @types/quill
npm install react-hook-form

For other configuration options, check out the react-quilljs documentation.

Usage

First, create a file named App.tsx in the root directory. This file will be used to render the editor. Be caution when using this file like this, because it will not work without the Layout.tsx component (see the project on GitHub)

Then, create a file named Editor.tsx in the components directory. This file will be used to render the editor.

Conclusion

You can view results on CodeSandbox

The project is hosted on GitHub

Thank you

Life's too short for boring endings.

🌲Svelte + 🍃Leaflet + 📍 Clusters

Arnaud F. — Mon, 25 Sep 2023 05:37:49 +0000

For a personal project, I had to use Leaflet with Svelte, and I faced some problems during development.

In this article, I will list each point that required finding a solution.

Integrating Leaflet into a SvelteKit project

I highly recommend that you read the article Using Leaflet with SvelteKit written by Stanislav Khromov.

He explains an effective way to add Leaflet to a project made with SvelteKit. It was my starting point in my project.

Install Leaflet.markercluster plugin

You can retrieve this plugin from its official repo on Github : Leaflet.markercluster.

I used npm to add it to my project.

npm install leaflet.markercluster

Now, it needs to be integrated into the code of the file LeafletMap.svelte.

onMount(async () => {
    if (browser) {
        const leaflet = await import('leaflet');
        const { MarkerClusterGroup }: any = await import('leaflet.markercluster');

Afterwards, we can declare the variable lower in the file, and add each marker to the markers element. Finally, add all the markers to the map.

// L.MarkerClusterGroup extends L.FeatureGroup
// by clustering the markers contained within
let markers = new MarkerClusterGroup();

// create feature group
// for each marker, add it to markers
markers.addLayer(marker);

// Add all markers to map
map.addLayer(markers);

Of course, don’t forget to add the CSS style.

@import 'leaflet.markercluster/dist/MarkerCluster.Default.css';

Bug of icons in production environment

The Leaflet framework can give an error once the project is deployed, the path to the icon causes a 404 (not found) error. To remedy this, one of the solutions is to manually define the icon with an image available in the project’s assets.

const iconRetinaUrl = './images/leaflet/marker-icon-2x.png';
const iconUrl = './images/leaflet/marker-icon.png';
const shadowUrl = './images/leaflet/marker-shadow.png';
const iconDefault = leaflet.icon({
    iconRetinaUrl,
    iconUrl,
    shadowUrl,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize: [41, 41]
});

Afterwards, you need to use the iconDefault variable in the marker definition, for example:

leaflet.marker(coords, {
    icon: iconDefault
})

By using the iconDefault variable in the marker definition, you can ensure that all markers use the same default icon.

Et voilà 🎉

These are the only errors I had to correct during my development, I hope this article will be useful to you.

DEV Community: Arnaud F.