Grammarly Text Editor SDK for React
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>
);
}
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 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>
);
}
API
For additional configuration details, please see the API reference.
Example
Check it out on CodeSandboxopen in new window.
Integrating with rich text editor frameworks
We regularly test the Text Editor SDK for React for compatibility with TinyMCE 5 & 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.