Text Editor SDK for React

Installation

npm install @grammarly/editor-sdk-react

Usage

Wrap the Editor components you want to add the Text Editor SDK to with GrammarlyEditorPlugin:

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

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

Only editor components powered by the following HTML elements are supported: <input type='text'>, <textarea> and contenteditable="true" that are not readonly or disabled.

If your app has multiple text editors that you want to equip with Grammarly, use the Grammarly wrapper to pass clientId and other configuration once:

<Grammarly clientId="YOUR_CLIENT_ID">
  <label htmlFor="title">Title</label>
  <GrammarlyEditorPlugin>
    <input id="title" />
  </GrammarlyEditorPlugin>

  <GrammarlyEditorPlugin>
    <textarea></textarea>
  </GrammarlyEditorPlugin>
</Grammarly>

API

For additional configuration details, please see API reference.

Example

Check it out on CodeSandboxopen in new window.

Last Updated: 9/28/2021, 7:02:48 PM