Forem: Thomas Findlay

Looking for the best React Editor library

Thomas Findlay — Sat, 28 Jan 2023 13:15:00 +0000

Gathering user input is very common across the internet, and forms with various fields can be found on many websites. However, forms can vary in size and complexity. Simple forms can contain just one input field, while more complex ones could involve multiple steps with different fields like textareas, dropdowns, radios, checkboxes, and so on. However, there are circumstances when a user should be able to provide richer content, such as text in different formatting and sizes, images, videos, links, etc., without a limitation of pre-defined fields. That's where Rich Text Editors come into play.

As is the case with a lot of things, there are plenty of libraries that can be used to incorporate a Rich Text Editor in React. However, they all differ in what they provide and how they work. For example, some React Rich Text Editors provide barebones that can be used and built upon to create a Rich Text Editor, while others offer full-blown editors with a lot of functionality out-of-the-box that can be configured to suit the application's needs. In this article, we will explore a few popular React Rich Text Editors, the features they provide and how to implement them, specifically:

Slate
TipTap
Quill
KendoReact Rich Text Editor

You can find the full code example in this GitHub repo and an interactive example in the Stackblitz.

If you would like to follow this article, you can clone the GitHub repo for this article and switch to the start branch. The commands below show how to do that:



$ git clone https://github.com/ThomasFindlay/looking-for-best-react-editor-library
$ cd looking-for-best-react-editor-library
$ git checkout start
$ npm install
$ npm run dev

Slate

Slate, as per its documentation, is a completely customizable framework for building rich text editors. Therefore, it doesn't offer a feature-rich text editor but instead provides tools to build one. Let's create a component called Slate and see what the Slate editor looks like.

src/components/Slate.jsx



import { useMemo } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";

const initialValue = [
  {
    type: "paragraph",
    children: [
      {
        text: "Hello Slate Editor",
      },
    ],
  },
];

const SlateEditor = props => {
  const editor = useMemo(() => withReact(createEditor()), []);
  return (
    <div>
      <h2> Slate </h2>
      <Slate editor={editor} value={initialValue}>
        <Editable
          style={{
            border: "1px solid grey",
            padding: "0.25rem",
          }}
        />
      </Slate>
    </div>
  );
};

export default SlateEditor;

Next, import and render the Slate component in the App component.

src/App.jsx



import "./App.css";
import Slate from "./components/Slate";

function App() {
  return (
    <div className="App">
      <h1>React Editors</h1>

      <div
        style={{
          width: 700,
          display: "flex",
          flexDirection: "column",
          gap: 32,
        }}
        >
        <Slate />
      </div>
    </div>
  );
}

export default App;

The initial Slate editor looks just like a normal textarea field.

As mentioned before, Slate offers tools that can be used to build a Rich Text Editor. Functionality such as boldening and italicizing text or adding images is not provided and instead needs to be implemented. This isn't great if all you want is an easily configurable text editor. However, it can be useful if more custom functionality is needed. Let's have a look at how to add functionality to insert an image with Slate.

The usefulness of Slate lies in the fact that it is completely customizable, and we can define what Slate should render and how. In the initial example above, we provided the following object to display the Hello Slate Editor message in the editor:



const initialValue = [
  {
    type: "paragraph",
    children: [
      {
        text: "Hello Slate Editor",
      },
    ],
  },
];

We can customise what the Slate editor renders by providing a custom component via the renderElement prop. The custom component can decide how to render a block in the Slate editor based on its type. The default element type is a paragraph, but we will add a new one called image. First, let's create a button and logic that will trigger a popup to enter a URL and then insert an image into the editor.

src/components/slate/components/InsertImageButton.jsx



import { Transforms } from "slate";
import { useSlateStatic } from "slate-react";
import { isImageUrl } from "../helpers/isImageUrl";

const insertImage = (editor, url) => {
  const text = { text: "" };
  const image = { type: "image", url, children: [text] };
  Transforms.insertNodes(editor, image);
};

export const withImages = editor => {
  const { insertData, isVoid } = editor;

  editor.isVoid = element => {
    return element.type === "image" ? true : isVoid(element);
  };

  editor.insertData = data => {
    const text = data.getData("text/plain");

    const { files } = data;

    if (files && files.length > 0) {
      for (const file of files) {
        const reader = new FileReader();
        const [mime] = file.type.split("/");

        if (mime === "image") {
          reader.addEventListener("load", () => {
            const url = reader.result;
            insertImage(editor, url);
          });

          reader.readAsDataURL(file);
        }
      }
    } else if (isImageUrl(text)) {
      insertImage(editor, text);
    } else {
      insertData(data);
    }
  };

  return editor;
};

const InsertImageButton = () => {
  const editor = useSlateStatic();
  return (
    <button
      onMouseDown={event => {
        event.preventDefault();
        const url = window.prompt("Enter the URL of the image:");
        if (url && !isImageUrl(url)) {
          alert("URL is not an image");
          return;
        }
        url && insertImage(editor, url);
      }}
    >
      Add Image
    </button>
  );
};

export default InsertImageButton;

We have three main pieces in the code above - insertImage and withImages functions and the InsertImageButton component.

The first one is responsible for creating and inserting a new image node. The withImages function is a higher-order function that modifies the editor instance. Specifically, it monkey patches isVoid and insertData methods to handle the new image node type. The InsertImageButton component, as the name suggests, renders a button that prompts a user to enter a URL and then executes the insertImage function.

The withImages function utilises a helper called isImageUrl, but it doesn't exist yet, so let's take care of that.

src/components/slate/helpers/isImageUrl.js



import imageExtensions from "image-extensions";
import isUrl from "is-url";

export const isImageUrl = url => {
  if (!url) return false;
  if (!isUrl(url)) return false;
  const ext = new URL(url).pathname.split(".").pop();
  return imageExtensions.includes(ext);
};

Next, we need to create a custom Element component and the Image component so the Slate editor knows how to handle nodes with the image type.

src/components/slate/components/slate-elements/Element.jsx



import Image from "./Image";

const Element = props => {
  const { attributes, children, element } = props;
  switch (element.type) {
    case "image":
      return <Image {...props} />;
    default:
      return <p {...attributes}>{children}</p>;
  }
};

export default Element;

The Element component uses the element.type value to render either a paragraph element or the Image component that we will create now.

src/components/slate/components/slate-elements/Image.jsx



import { useFocused, useSelected } from "slate-react";
import { css } from "@emotion/css";

const Image = ({ attributes, children, element }) => {
  const selected = useSelected();
  const focused = useFocused();
  return (
    <div {...attributes}>
      {children}
      <div
        contentEditable={false}
        className={css`
          position: relative;
        `}
      >
        <img
          src={element.url}
          className={css`
            display: block;
            max-width: 100%;
            max-height: 20em;
            box-shadow: ${selected && focused ? "0 0 0 3px #B4D5FF" : "none"};
          `}
        />
      </div>
    </div>
  );
};

export default Image;

The Image component renders an image element and utilises the selected and focused values to highlight the rendered image.

Now we can create a new component to render the Slate editor with image capabilities.

src/components/slate/SlateWithImage.jsx



import { useMemo } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import InsertImageButton, { withImages } from "./components/InsertImageButton";
import Element from "./components/slate-elements/Element";

const initialValue = [
  {
    type: "paragraph",
    children: [
      {
        text: "Hello Slate Editor",
      },
    ],
  },
];

const SlateEditor = props => {
  const editor = useMemo(() => withImages(withReact(createEditor())), []);
  return (
    <div>
      <h2> Slate With Image </h2>
      <Slate editor={editor} value={initialValue}>
        <div style={{ marginBottom: "1rem" }}>
          <InsertImageButton />
        </div>
        <Editable
          renderElement={props => <Element {...props} />}
          style={{
            border: "1px solid grey",
            padding: "0.25rem",
          }}
        />
      </Slate>
    </div>
  );
};

export default SlateEditor;

Last but not least, let's render the SlateWithImage component.

src/App.jsx



import "./App.css";
import SlateWithImage from "./components/slate/SlateWithImage";

function App() {
  return (
    <div className="App">
      <h1>React Editors</h1>
      <div
        style={{
          width: 700,
          display: "flex",
          flexDirection: "column",
          gap: 32,
        }}
        >
        <SlateWithImage />
      </div>
    </div>
  );
}

export default App;

The gif below shows what the Slate editor with an image looks like.

If you're up for a challenge, you can enhance the image upload functionality and allow a user to upload an image from their device instead of only providing a URL.

TipTap

TipTap, built on top of ProseMirror, is a headless editor framework that gives full control over every single aspect of the text editor experience. Similarly to Slate, TipTap doesn't offer a fully featured Rich Text Editor; instead, it offers a lot of extensions and can be customized to incorporate new features. Let's have a look at how we can implement a TipTap editor with the image extension that will provide similar functionality to the one we implemented in the last section for the Slate editor.

src/components/TipTap.jsx



import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import style from "./TipTap.module.scss";
import { Image } from "@tiptap/extension-image";
import { useCallback } from "react";

Image.configure({});

const TipTap = props => {
  const editor = useEditor({
    extensions: [StarterKit, Image],
    content: "<p>Hello from TipTap Rich Text Editor!</p>",
  });

  const addImage = useCallback(() => {
    const url = window.prompt("URL");
    if (!url) return;
    editor.chain().focus().setImage({ src: url }).run();
  }, [editor]);

  if (!editor) return null;

  return (
    <div className={style.tiptapContainer}>
      <h2>TipTap</h2>
      <div className="k-display-flex k-gap-2">
        <button onClick={() => editor.chain().focus().toggleBold().run()}>
          B
        </button>
        <button onClick={() => editor.chain().focus().toggleItalic().run()}>
          I
        </button>
        <button onClick={addImage}>Add Image</button>
      </div>
      <EditorContent editor={editor} />
    </div>
  );
};

export default TipTap;

A TipTap editor instance is created using the useEditor hook and then passed to the EditorContent component. The useEditor hook accepts a config object as an argument. In our example, we have two extensions - StarterKit and Image. The former includes several common features for formatting text and adding richer content, such as headings, lists, bullets, code blocks, etc. The Image extension provides the logic that handles the insertion of images into the Tiptap editor. Besides the EditorContent component that was mentioned earlier, we also have three buttons. The first two allow boldening and italicization of text, whilst the last one triggers a prompt asking for an image URL and then adds the image to the editor.

TipTap is a headless editor, so it doesn't provide any styles by default. However, TipTap's documentation has some basic styles for the editor.

src/components/TipTap.module.scss



/* Basic editor styles */
.tiptapContainer {
  .ProseMirror {
    padding: 0.5rem;

    > * + * {
      margin-top: 0.75em;
    }

    ul,
    ol {
      padding: 0 1rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: 1.1;
    }

    code {
      background-color: rgba(#616161, 0.1);
      color: #616161;
    }

    pre {
      background: #0d0d0d;
      color: #fff;
      font-family: "JetBrainsMono", monospace;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;

      code {
        color: inherit;
        padding: 0;
        background: none;
        font-size: 0.8rem;
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }

    blockquote {
      padding-left: 1rem;
      border-left: 2px solid rgba(#0d0d0d, 0.1);
    }

    hr {
      border: none;
      border-top: 2px solid rgba(#0d0d0d, 0.1);
      margin: 2rem 0;
    }
  }
}

After the styles are ready, we need to render the TipTap component, so let's update the App component.

src/App.jsx



import "./App.css";
import TipTap from "./components/TipTap";

function App() {
  return (
    <div className="App">
      <h1>React Editors</h1>

      <div
        style={{
          width: 700,
          display: "flex",
          flexDirection: "column",
          gap: 32,
        }}
        >
        <TipTap />
      </div>
    </div>
  );
}

export default App;

Below you can see what the TipTap editor looks like.

Quill

Quill.js is a rich text editor that provides a configurable editor with various features. Compared to Slate and TipTap, Quill is a drop-in solution that doesn't require building common text editing functionality from scratch.

To demonstrate how Quill works, we are going to use the React-Quill package, which is a React wrapper around the Quill editor. Below we have a component that will render the React Quill editor with a toolbar that offers tools for formatting text.

src/components/Quill.jsx



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

const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["link", "image"],
    ["clean"],
  ],
};

const Quill = props => {
  const [value, setValue] = useState("");

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

export default Quill;

The modules prop can be used to configure the Quill editor. In this example, we configure the toolbar and specify what text editing features should be active and in which order they should be displayed.

We need to update the App component to render the Quill editor.

src/App.jsx



import "./App.css";
import Quill from "./components/Quill";

function App() {
  return (
    <div className="App">
      <h1>React Editors</h1>
      <div
        style={{
          width: 700,
          display: "flex",
          flexDirection: "column",
          gap: 32,
        }}
        >
        <Quill />
      </div>
    </div>
  );
}

export default App;

Here's what the Quill editor looks like.

KendoReact Editor

KendoReact Rich Text Editor, similarly to Quill, provides a feature-rich editor component that offers a large number of editor tools. It can be easily configured with as little or as many text editing tools as needed. Let's see it in action.

src/components/KendoReactEditor.jsx



import "@progress/kendo-theme-material/dist/all.css";
import { Editor, EditorTools } from "@progress/kendo-react-editor";

const {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  Subscript,
  Superscript,
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
  Indent,
  Outdent,
  OrderedList,
  UnorderedList,
  Undo,
  Redo,
  FontSize,
  FontName,
  FormatBlock,
  Link,
  Unlink,
  InsertImage,
  ViewHtml,
  InsertTable,
  AddRowBefore,
  AddRowAfter,
  AddColumnBefore,
  AddColumnAfter,
  DeleteRow,
  DeleteColumn,
  DeleteTable,
  MergeCells,
  SplitCell,
} = EditorTools;

const content = "Hello from KendoReact Editor";

const KendoReactEditor = props => {
  return (
    <div>
      <h2>KendoReact Editor</h2>
      <Editor
        tools={[
          [Bold, Italic, Underline, Strikethrough],
          [Subscript, Superscript],
          [AlignLeft, AlignCenter, AlignRight, AlignJustify],
          [Indent, Outdent],
          [OrderedList, UnorderedList],
          FontSize,
          FontName,
          FormatBlock,
          [Undo, Redo],
          [Link, Unlink, InsertImage, ViewHtml],
          [InsertTable],
          [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
          [DeleteRow, DeleteColumn, DeleteTable],
          [MergeCells, SplitCell],
        ]}
        contentStyle={{ height: 320 }}
        defaultContent={content}
      />
    </div>
  );
};

export default KendoReactEditor;

The EditorTools object contains toolbar components for the rich text editor. These are then passed to the Editor component via the tools prop. The tools can be grouped into sections and ordered using nested arrays and changing the order in which they are defined.

Finally, let's render the KendoReact Editor.

src/App.jsx



import "./App.css";
import KendoReactEditor from "./components/KendoReactEditor";

function App() {
  return (
    <div className="App">
      <h1>React Editors</h1>

      <div>
        <div
          style={{
            width: 700,
            display: "flex",
            flexDirection: "column",
            gap: 32,
          }}
        >
          <KendoReactEditor />
        </div>
      </div>
    </div>
  );
}

export default App;

And here's what it looks like.

KendoReact Text Editor, besides an impressive number of text editing features, also has built-in support for tables, find and replace, globalization and many other features. Here's an example of the table functionality in the editor.

Summary

There are multiple React Editor libraries available on the market that developers can choose from. However, it's important to choose an appropriate library for your project. If you want to build a custom rich text editor, Slate and TipTap could be great choices, as they can provide the necessary tools. However, if you want to easily add a rich text editor that can be configured to provide a user with a lot of options for text editing, then Quill and KendoReact Editor are the appropriate choices, as they will require much less code to achieve the same outcome. What's more, KendoReact Editor comes with another benefit, as it is a part of an enterprise-grade suite of React UI components called KendoReact UI that offers over 100 ready-to-use React components.

React Dashboards - Why Are They So Popular And How To Build One?

Thomas Findlay — Tue, 17 May 2022 16:20:42 +0000

Dashboards are a very popular type of web application. A great thing about dashboards is that they can be used to display a variety of data in many formats to the user and provide relevant information and metrics. There are different types of dashboards, such as admin dashboards that can be used to manage users, accounts, and business-related data or financial dashboards that display useful financial information, statistics and various charts and graphs. One dashboard I worked on in the past was a platform for recruiters that incorporated information about jobs, applications, applicants, credits, etc. Whilst an admin user could manage all jobs and users and configure rules for the system, a recruiter user could create jobs and buy credits. In a nutshell, dashboard applications make it easy to see a lot of data quickly but also to effortlessly access various features.

What Tools Should Be Used To Build A Dashboard?

Dynamic dashboards can involve quite a lot of interactivity and data fetching, sometimes even in real-time. That's why a lot of developers choose frameworks that are declarative and can be used to build single-page applications (SPAs). Good examples are React, Vue and Angular. A single page application avoids page reloads, so the UI can be updated instantly in many different places after API requests are performed. For example, a dashboard home page could display a few different widgets, and each of them can make its own API requests to fetch required data. What's more, these frameworks are component-based, and components are great for encapsulating and reusing common UI elements and logic. Most dashboard applications do not require any search engine optimisation, as they often require a user to be authenticated, so that's another point for SPAs.

Learn More About How To Build Dashboards using React

Building a dashboard might seem like an overwhelming task at the start. There are so many things going on, after all, such as displaying dashboard widgets and providing users with the capability to configure them. Fortunately, building a dashboard might be easier than you think. I've written a tutorial called React Dashboard Tutorial—How To Build an Interactive Dashboard - it will walk you through how to create an interactive dashboard in React.

Vite: Blazing-Fast Tooling That Could Change How You Code

Thomas Findlay — Sat, 26 Mar 2022 14:31:18 +0000

Have you heard of Vite — the modern and super-fast tool for scaffolding projects? It’s spreading like wild fire due to its almost immediate code compilation and fast hot module replacement.

Vite is one of many tools that have come along to help developers get projects kicked off. Maybe you’ve used Babel, webpack and Create React App in the past. Vite is the next new thing to make our lives easier.

These feature-rich CLI tools provide a boilerplate setup, code transpilation, helpful optimizations and/or a dev server with hot module replacement out of the box. No longer do we have to create a bunch of HTML, CSS, and JS files, or deploy our projects manually via FTP clients, and files were uploaded as they were, without any processing and optimizations like minification and compressing.

So What Makes Vite Different?

Vite may just be our fastest bundler/compiler/dev server yet. On top of that, it provides a great developer experience.

Created by Evan You, the creator of the Vue.js framework, Vite runs a server to compile and serve on the fly any required dependencies via ES modules. This approach allows Vite to process and provide only the code that’s needed — meaning Vite handles less code during the server startup and doesn't have to pre-compile unnecessary code.

Where webpack bundles all files in the project before the development server is ready, thereby growing slower the bulkier a project grows, Vite stays nimble, working with ES modules to serve code as needed.

Vite also uses esbuild for pre-bundling dependencies during development. esbuild is an extremely fast JavaScript bundler written in the Go language. This makes it much faster than other bundlers like webpack, Rollup and Parcel, which were written using JavaScript.

On top of its speed, Vite is framework-agnostic. While a lot of popular frameworks provide official CLIs that can be used to scaffold projects (e.g., React offers Create React App, and Vue has Vue CLI), you can use Vite across the board, so it’s as versatile as you are.

Learn More About Vite and How To Use It

Would you like to know how to set up path resolving, use environmental variables, scaffold a project and see pros and cons of Vite? I’ve written an in-depth guide to Vite that talks through more details about how it’s different as well as how to use it to get your project up and running.

How to download CSV and JSON files in React

Thomas Findlay — Wed, 01 Sep 2021 16:30:09 +0000

This article was originally published on The Road To Enterprise blog. Read it there for the best reading experience.

There are websites that let users download CSV or JSON data as a file. This functionality can be quite useful, as users can download the data for further processing or to share it. In this article, you will learn how to add the functionality that will allow users to export a table in React and download it in JSON and CSV formats.

You can find the full code example in the GitHub repo.

Project Setup

First, let's create a new React project using Vite.

npm init vite@latest csv-json-files-download -- --template react

After the project is created, cd into it to install dependencies by running npm install and then start the dev server with npm run dev.

Next, we need to modify the App.jsx and App.css files.

src/App.jsx

import React from 'react'

function App() {
  return (
    <div className='App'>
      <h1>How to download CSV and JSON files in React</h1>
    </div>
  )
}

export default App

src/App.css

.App {
  max-width: 40rem;
  margin: 2rem auto;
}

That's enough for the initial setup. Let's start by adding functionality to export to JSON.

Export to JSON

Let's start by creating a file with users data that will be used for downloading a file and rendering a table.

src/users.json

{
  "users": [
    {
      "id": 1,
      "name": "Caitlyn",
      "surname": "Kerluke",
      "age": 24
    },
    {
      "id": 2,
      "name": "Rowan ",
      "surname": "Nikolaus",
      "age": 45
    },
    {
      "id": 3,
      "name": "Kassandra",
      "surname": "Haley",
      "age": 32
    },
    {
      "id": 4,
      "name": "Rusty",
      "surname": "Arne",
      "age": 58
    }
  ]
}

Next, we need to update the App component to utilise the users data and display it in a table. Besides that, we will add a button to trigger the download. Below you can see the code for the App.jsx component. Besides the component. we have two functions: exportToJson and downloadFile. The former one calls the latter with appropriate arguments. The downloadFile function accepts an object as a parameter and expects three properties:

data
fileName
fileType

The data and fileType are used to create a blob that is downloaded. After that, we create an anchor element and dispatch a click event on it.

src/App.jsx

import React from 'react'
import './App.css'
import usersData from './users.json'

const downloadFile = ({ data, fileName, fileType }) => {
  // Create a blob with the data we want to download as a file
  const blob = new Blob([data], { type: fileType })
  // Create an anchor element and dispatch a click event on it
  // to trigger a download
  const a = document.createElement('a')
  a.download = fileName
  a.href = window.URL.createObjectURL(blob)
  const clickEvt = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
  })
  a.dispatchEvent(clickEvt)
  a.remove()
}

const exportToJson = e => {
  e.preventDefault()
  downloadFile({
    data: JSON.stringify(usersData.users),
    fileName: 'users.json',
    fileType: 'text/json',
  })
}

function App() {
  return (
    <div className='App'>
      <h1>How to download CSV and JSON files in React</h1>

      <table className='usersTable'>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {usersData.users.map(user => {
            const { id, name, surname, age } = user
            return (
              <tr key={id}>
                <td>{id}</td>
                <td>{name}</td>
                <td>{surname}</td>
                <td>{age}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
      <div className='actionBtns'>
        <button type='button' onClick={exportToJson}>
          Export to JSON
        </button>
      </div>
    </div>
  )
}

export default App

We can add a few styles, so the table looks a bit nicer.

src/App.css

.App {
  max-width: 40rem;
  margin: 2rem auto;
}

.usersTable th,
.usersTable td {
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.actionBtns {
  margin-top: 1rem;
}

.actionBtns button + button {
  margin-left: 1rem;
}

Great, now you should be able to download the users data as a JSON file by clicking on the Export to JSON button. Next, we will add Export to CSV functionality.

Export to CSV

We need another button that will be used to export data to a CSV file. Besides that, we also need a handler for it. The usersData is in the JSON format, so we will need to convert it to the CSV format, before passing it to the downloadFile function.

src/App.jsx

import React from 'react'
import './App.css'
import usersData from './users.json'

const downloadFile = ({ data, fileName, fileType }) => {
  const blob = new Blob([data], { type: fileType })

  const a = document.createElement('a')
  a.download = fileName
  a.href = window.URL.createObjectURL(blob)
  const clickEvt = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
  })
  a.dispatchEvent(clickEvt)
  a.remove()
}

const exportToJson = e => {
  e.preventDefault()
  downloadFile({
    data: JSON.stringify(usersData.users),
    fileName: 'users.json',
    fileType: 'text/json',
  })
}

const exportToCsv = e => {
  e.preventDefault()

  // Headers for each column
  let headers = ['Id,Name,Surname,Age']

  // Convert users data to a csv
  let usersCsv = usersData.users.reduce((acc, user) => {
    const { id, name, surname, age } = user
    acc.push([id, name, surname, age].join(','))
    return acc
  }, [])

  downloadFile({
    data: [...headers, ...usersCsv].join('\n'),
    fileName: 'users.csv',
    fileType: 'text/csv',
  })
}

function App() {
  return (
    <div className='App'>
      <h1>How to download CSV and JSON files in React</h1>

      <table className='usersTable'>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {usersData.users.map(user => {
            const { id, name, surname, age } = user
            return (
              <tr key={id}>
                <td>{id}</td>
                <td>{name}</td>
                <td>{surname}</td>
                <td>{age}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
      <div className='actionBtns'>
        <button type='button' onClick={exportToJson}>
          Export to JSON
        </button>
        <button type='button' onClick={exportToCsv}>
          Export to CSV
        </button>
      </div>
    </div>
  )
}

export default App

Wrap up

There we have it. I hope you enjoyed this article. Now you should be well equipped with knowledge on how to add download files functionality to your own projects. Remember that even though I used React to demonstrate the download examples, you can use the download logic in other frameworks like Vue, Svelte, or Angular.

Want to stay up to date and learn more programming tips? Make sure to follow me on Twitter and subscribe to the newsletter!

How to easily sync with multiple v-models in Vue 3 using Composition API

Thomas Findlay — Wed, 17 Mar 2021 17:05:48 +0000

This article was originally published at The Road To Enterprise.

Vue 3 has brought many new features, and the ability to use more than one v-model directive on the same element is one of them. I want to share with you a quick tip on how to handle updating the state of a parent component when using multiple v-models. It's especially useful when dealing with forms. You can find the full code example in this GitHub repository.

For this example, we will use a form shown in the image below.

Below you can find the code for it. We have two files - App.vue, which has the form state and renders the Form component. The Form.vue component renders the form element with labels and inputs fields.

App.vue



<template>
  <div :class="$style.container">
    <Form
      v-model:name="form.name"
      v-model:surname="form.surname"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import Form from './components/Form.vue'

export default {
  components: {
    Form,
  },
  setup() {
    const form = ref({
      name: '',
      surname: '',
    })

    const onSubmit = () => console.log(form)

    return {
      form,
      onSubmit,
    }
  },
}
</script>

<style module>
.container {
  max-width: 30rem;
  @apply mx-auto py-8;
}
</style>

components/Form.vue



<template>
  <form @submit.prevent="$emit('submit')">
    <div :class="$style.formBlock">
      <label :class="$style.label">Name</label>
      <input
        v-model="nameState"
        :class="$style.input"
        type="text"
        aria-label="Name input"
      />
    </div>
    <div :class="$style.formBlock">
      <label :class="$style.label">Surname</label>
      <input
        v-model="surnameState"
        :class="$style.input"
        type="text"
        aria-label="Surname input"
      />
    </div>
    <div>
      <button
        class="float-right bg-blue-100 text-blue-900 px-4 py-3 rounded font-semibold"
        type="submit"
      >
        Submit
      </button>
    </div>
  </form>
</template>

<script>
import { useVModel } from '../composables/useVModel.js'
export default {
  emits: ['update:name', 'update:surname', 'submit'],
  props: {
    name: String,
    surname: String,
  },
  setup(props) {
    return {
      nameState: useVModel(props, 'name'),
      surnameState: useVModel(props, 'surname'),
    }
  },
}
</script>

<style module>
.formBlock {
  @apply flex flex-col mb-4;
}
.label {
  @apply mb-2;
}
.input {
  @apply px-4 py-3 shadow rounded border border-gray-300 bg-white;
}
</style>

To update the state in the parent, we need to emit an update:<modelValue> event.

Here is the code for the useVModel helper.

composables/useVModel.js



import { computed, getCurrentInstance } from 'vue'

export const useVModel = (props, propName) => {
  const vm = getCurrentInstance().proxy

  return computed({
    get() {
      return props[propName]
    },
    set(value) {
      vm.$emit(`update:${propName}`, value)
    },
  })
}

We have to pass the props object to keep the reactivity intact and the prop name which we want to sync with. Inside of the useVModel we get access to the current instance via getCurrentInstance(), as we need access to the $emit method. The computed receives an object with a getter and setter. The getter returns the value passed via props, whilst the setter emits an event to update the value. Thanks to this little helper, keeping the state passed through props via v-models is much cleaner and simpler.

I hope you enjoyed this article. If you would like to learn more tips, advanced patterns, techniques and best practices related to Vue, you might want to check out "Vue - The Road To Enterprise" book and subscribe to the newsletter.

Vue Enterprise Patterns - How to Build Components With Design System Variants And Share Them Using Variant Style Provider

Thomas Findlay — Wed, 03 Mar 2021 21:26:20 +0000

This article was originally published at The Road To Enterprise.

Many projects, especially larger ones, have a design system that serves as a guide on how components should look and feel. Let's take buttons as an example. Below you can see a quick design for different button variants done in Figma.

Buttons can have different variants, such as primary and secondary, for main actions on a website. There can also be variants like warning or danger, which are supposed to make a user cautious about the action they are about to undertake. There are multiple ways in which variants can be implemented. I want to share with you how this can be achieved in an efficient and clean manner using CSS variables and modules.

In this tutorial, we are going to cover:

How to create Button and Tag components with variants based on a design system.
How to take advantage of CSS variables and CSS modules to implement component variants.
How to share variant styles between multiple components using a VariantStyleProvider component.

Project setup

You can find the GitHub repository with a full code example here. I have used Vite to scaffold a new project for this tutorial. If you would like to follow this tutorial, you can create a new project with Vite by running one of the commands shown below:

With NPM:

$ npm init @vitejs/app

With Yarn:

$ yarn create @vitejs/app

After creating the project, install dependencies and start the dev server.

Let's start with creating a new BaseButton.vue component.

src/components/BaseButton.vue

<template>
  <button :class="[$style.baseButton]" v-bind="$attrs">
    <slot />
  </button>
</template>

<script>
export default {
  props: {
    variant: {
      type: String,
      validators: value =>
        ['primary', 'secondary', 'warning', 'danger'].includes(value),
    },
  },
}
</script>

<style module>
.baseButton {
  border: none;
  background: transparent;
  padding: 0.6rem 1rem;
}
</style>

It's a very simple component that has one prop only - variant. Now, let's replace the content of the App.vue component and add four buttons for each variant.

src/App.vue

<template>
  <div :class="$style.container">
    <BaseButton variant="primary"> Primary </BaseButton>
    <BaseButton variant="secondary"> Secondary </BaseButton>
    <BaseButton variant="warning"> Warning </BaseButton>
    <BaseButton variant="danger"> Danger </BaseButton>
  </div>
</template>

<script>
import BaseButton from './components/BaseButton.vue'
export default {
  components: {
    BaseButton,
  },
}
</script>

<style module>
.container {
  width: 300px;
  margin: 2rem auto;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}
</style>

As you can see above, we render four BaseButton components for each variant: primary, secondary, warning, and danger.

Below is an image showing how the buttons should look like at the moment. The primary one is focused, so there is a default outline colour shown.

I know it's nothing fancy yet, but we will get there. We have a basic setup, so let's add CSS variables and styles for each of the variants in the BaseButton component. Note that we are not using scoped styles (<style scoped>). Instead, we use CSS modules: <style module>. Any styles defined this way are exposed to the component under the $style property.

CSS variables and BaseButton component variants

First, create a new file called variables.css and add the CSS variables shown below.

src/styles/variables.css

:root {
  --primary-text-color: #eff6ff;
  --primary-bg-color: #1d4ed8;
  --secondary-text-color: #1d4ed8;
  --secondary-bg-color: #eff6ff;
  --warning-text-color: #c2410c;
  --warning-bg-color: #fff7ed;
  --danger-text-color: #b91c1c;
  --danger-bg-color: #fee2e2;
}

Import the variables.css file in the main.js file, as the components in the application will need to be able to access them.

src/main.js

import { createApp } from 'vue'
import './styles/variables.css'
import App from './App.vue'

createApp(App).mount('#app')

Next, we need to update the BaseButton component. There are three things we need to do:

Add a variant style based on the variant prop.
Add color and background-color properties to the baseButton class.
Add CSS variables for each variant class.

src/components/BaseButton.vue

First, change classes that are passed to the button element. Besides the baseButton class, it should also receive an appropriate variant class. This class will be determined by the variant prop.

<template>
  <button :class="[$style.baseButton, $style[variant]]" v-bind="$attrs">
    <slot />
  </button>
</template>

Next, we add color and background-color properties to the baseButton class. These properties will have --btn-text-color and --btn-bg-color variables for values. These will be set by each variant class and will correspond to the CSS variables defined in the variables.css file.

<style module>
.baseButton {
  border: none;
  padding: 0.6rem 1rem;
  color: var(--btn-text-color);
  background-color: var(--btn-bg-color);
}

.primary {
  --btn-text-color: var(--primary-text-color);
  --btn-bg-color: var(--primary-bg-color);
}

.secondary {
  --btn-text-color: var(--secondary-text-color);
  --btn-bg-color: var(--secondary-bg-color);
}

.warning {
  --btn-text-color: var(--warning-text-color);
  --btn-bg-color: var(--warning-bg-color);
}

.danger {
  --btn-text-color: var(--danger-text-color);
  --btn-bg-color: var(--danger-bg-color);
}
</style>

Great, each button rendered by the App.vue component should now have appropriate colours applied, as shown in the image below.

If you would like, you can add more variables for different states, such as hover, active, or disabled.

We have achieved the first objective. We now have a button component that supports multiple variants. But what if we need to create another component that also should have support for the same variants? For instance, a tag component? Let's have a look at how we can handle it.

BaseTag component with variants

Let's start with creating a BaseTag.vue component and updating the App.vue component to render tags for each variant.

src/components/BaseTag.vue

<template>
  <div :class="[$style.baseTag, $style[variant]]" v-bind="$attrs">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    variant: {
      type: String,
      validators: value =>
        ['primary', 'secondary', 'warning', 'danger'].includes(value),
    },
  },
}
</script>

<style module>
.baseTag {
  border: none;
  border-radius: 1.5rem;
  padding: 0.6rem 1rem;
  color: var(--tag-text-color);
  background: var(--tag-bg-color);
}

.primary {
  --tag-text-color: var(--primary-text-color);
  --tag-bg-color: var(--primary-bg-color);
}

.secondary {
  --tag-text-color: var(--secondary-text-color);
  --tag-bg-color: var(--secondary-bg-color);
}

.warning {
  --tag-text-color: var(--warning-text-color);
  --tag-bg-color: var(--warning-bg-color);
}

.danger {
  --tag-text-color: var(--danger-text-color);
  --tag-bg-color: var(--danger-bg-color);
}
</style>

src/App.vue

<template>
  <div :class="$style.container">
    <BaseButton variant="primary"> Primary </BaseButton>
    <BaseButton variant="secondary"> Secondary </BaseButton>
    <BaseButton variant="warning"> Warning </BaseButton>
    <BaseButton variant="danger"> Danger </BaseButton>
  </div>
  <div :class="$style.container">
    <BaseTag variant="primary"> Primary </BaseTag>
    <BaseTag variant="secondary"> Secondary </BaseTag>
    <BaseTag variant="warning"> Warning </BaseTag>
    <BaseTag variant="danger"> Danger </BaseTag>
  </div>
</template>

<script>
import BaseButton from './components/BaseButton.vue'
import BaseTag from './components/BaseTag.vue'
export default {
  components: {
    BaseButton,
    BaseTag,
  },
}
</script>

After these updates, you should see four buttons and four tags on the screen, as shown in the image below.

It works, right? However, did you spot how similar BaseButton and BaseTag components are? They are almost the same, and we have quite a bit of code duplication for styles. There is also a different problem. What if we would have more than two components with variants, let's say twenty, and then later on we would need to introduce more variants or update existing ones to different CSS variables? Every single component that has variants would need to be updated separately. We can solve these problems by taking variant styles out of the BaseButton and BaseTag components. Instead, we are going to create a new component that will manage variants and pass appropriate styles via slots.

Do you want to learn advanced patterns, techniques, and best practices for the development of Vue applications? Check out Vue - The Road To Enterprise, the most advanced Vue book written.

How to share variant styles with a VariantStyleProvider component

A really great thing about CSS modules is that we can easily pass and compose styles. That's exactly what we will do now. Starting with creating a new component called VariantStyleProvider.vue. This component will do 3 things:

Accept a variant prop
Define variant styles for color and background-color properties
Render a slot and pass baseVariant and an appropriate variant class to it.

src/components/VariantStyleProvider.vue

<template>
  <slot :variantStyle="[$style.baseVariant, $style[variant]]" />
</template>

<script>
export default {
  props: {
    variant: {
      type: String,
      validators: value =>
        ['primary', 'secondary', 'warning', 'danger'].includes(value),
    },
  },
}
</script>

<style module>
.baseVariant {
  color: var(--variant-text-color);
  background-color: var(--variant-bg-color);
}

.primary {
  --variant-text-color: var(--primary-text-color);
  --variant-bg-color: var(--primary-bg-color);
}

.secondary {
  --variant-text-color: var(--secondary-text-color);
  --variant-bg-color: var(--secondary-bg-color);
}

.warning {
  --variant-text-color: var(--warning-text-color);
  --variant-bg-color: var(--warning-bg-color);
}

.danger {
  --variant-text-color: var(--danger-text-color);
  --variant-bg-color: var(--danger-bg-color);
}
</style>

Due to the fact that the VariantStyleProvider component is now handling variant styles, we will be able to remove them from the BaseButton and BaseTag components. Besides removing the styles, we also need to import the VariantStyleProvider and use the variantStyle that is passed from it. Below you can see the final versions of both components.

src/components/BaseButton.vue

<template>
  <VariantStyleProvider :variant="variant">
    <template #default="{ variantStyle }">
      <button :class="[$style.baseButton, variantStyle]" v-bind="$attrs">
        <slot />
      </button>
    </template>
  </VariantStyleProvider>
</template>

<script>
import VariantStyleProvider from './VariantStyleProvider.vue'

export default {
  components: {
    VariantStyleProvider,
  },
  props: {
    variant: {
      type: String,
      validators: value =>
        ['primary', 'secondary', 'warning', 'danger'].includes(value),
    },
  },
}
</script>

<style module>
.baseButton {
  border: none;
  padding: 0.6rem 1rem;
}
</style>

src/components/BaseTag.vue

<template>
  <VariantStyleProvider :variant="variant">
    <template #default="{ variantStyle }">
      <div :class="[$style.baseTag, variantStyle]" v-bind="$attrs">
        <slot />
      </div>
    </template>
  </VariantStyleProvider>
</template>

<script>
import VariantStyleProvider from './VariantStyleProvider.vue'

export default {
  components: {
    VariantStyleProvider,
  },
  props: {
    variant: {
      type: String,
      validators: value =>
        ['primary', 'secondary', 'warning', 'danger'].includes(value),
    },
  },
}
</script>

<style module>
.baseTag {
  border: none;
  border-radius: 1.5rem;
  padding: 0.6rem 1rem;
}
</style>

Both components are now much cleaner. We managed to remove unnecessary code duplication, as variant styles are managed in the VariantStyleProvider component. This pattern helps a lot with maintaining and extending variants. If you would need to update them or add new ones, you only have to focus on 2 files: variables.css and VariantStyleProvider.vue, instead of manually updating every single component where variants are used.

I hope you enjoyed this article. If you would like to learn more advanced patterns, techniques and best practices related to Vue, you might want to check out "Vue - The Road To Enterprise" book.

Vue - The Road To Enterprise (Giveaway!)

Thomas Findlay — Tue, 19 Jan 2021 20:32:51 +0000

After many months of writing and coding, I have recently released a new advanced Vue book called “Vue — The Road To Enterprise”. I have mentored many developers and teams, and one thing I often heard was that there are many resources for beginners to get started with Vue, but there is not a lot for those who are already familiar with Vue and want to advanced their knowledge to the next level. This is the reason why I decided to write this book.

What is in the book?

“Vue — The Road To Enterprise” is a book with more than 300 pages. It comprises 14 chapters covering a wide variety of guides, advanced patterns, tips, and best practices related to the development of large-scale Vue applications.
There are many useful things that this book can teach you about advanced concepts and managing large-scale applications. It covers many different topics, such as:

Differences between Vue 2 and 3 and how to prepare for migration.
Project setup and documentation
Scalable project architecture for your routes, components, and services
How to manage API requests, loading states, and request cancellation
Local and global state management patterns
Performance optimisation
Testing & Security
and more!

This book incorporates concepts and code examples for both Vue 2 and Vue 3, so no matter which one you use, you can find something that works for you. You can check it out here. There is also a 10% discount on, so hurry up before it expires!

Who is this book for?

Let me underline that this book is not a beginners guide. It won’t teach you how to get started with Vue. Instead, it’s an excellent resource for:

Developers with prior Vue knowledge who want to upscale their Vue proficiency and learn how to create enterprise-ready applications.
Developers and teams who want to quickly get on board with best practices, patterns, and tips to incorporate in their new or existing Vue projects.
Developers who are looking for career progression as a Vue.js Developer. Giveaway

I am currently running a giveaway on Twitter. Two lucky winners will get the Complete Package, including the book, Companion App, and the Enterprise Boilerplate. To participate in the giveaway check out this tweet.