Docs/React

Grammarly Text Editor SDK for React

This doc explains how to integrate the Grammarly Text Editor SDK with a React application.

For more guidance, you may also want to check out the following resources:

Installation

npm install @grammarly/editor-sdk-react

Usage

To add the Grammarly Text Editor Plugin, wrap editor components with GrammarlyEditorPlugin:

import React from "react";
import { GrammarlyEditorPlugin } from "@grammarly/editor-sdk-react";

export function GrammarlyEditor() {
  return (
    <GrammarlyEditorPlugin clientId="YOUR_CLIENT_ID">
      <textarea />
    </GrammarlyEditorPlugin>
  );
}

You can view an interactive example on CodeSandboxopen in new window.

Only editor components powered by the following HTML elements are supported:

<input type='text'>
<textarea> that are not readonly or disabled
contenteditable="true" that are not readonly or disabled

If your app has multiple text editors where you want to add the plugin, use the Grammarly wrapper to pass clientId and other configuration once:

import React from "react";
import { Grammarly, GrammarlyEditorPlugin } from "@grammarly/editor-sdk-react";

export function GrammarlyEditor() {
  return (
    <Grammarly clientId="YOUR_CLIENT_ID">
      <label htmlFor="title">Title</label>
      <GrammarlyEditorPlugin>
        <input id="title" />
      </GrammarlyEditorPlugin>
      <GrammarlyEditorPlugin>
        <textarea></textarea>
      </GrammarlyEditorPlugin>
    </Grammarly>
  );
}

For additional configuration details, please visit the API reference.

Integrating with rich text editor frameworks

We regularly test the Text Editor SDK for React for compatibility with TinyMCE 6, CKEditor 5, and Slate.

As described above, wrap rich text editor elements with <GrammarlyEditorPlugin>. Set any configuration options using the Grammarly wrapper or the GrammarlyEditorPlugin component.

Here is sample code to get started:

Support

The Text Editor SDK supports React versions 16.13 or later.

Preparing for production

Before making your app available in a production environment, please take note of the recommendations in Securing Your Integration.

# Grammarly Text Editor SDK for React

# Installation

# Usage

# Integrating with rich text editor frameworks