open-index/open-npm huggingface dataset:
npm package: @grammarly/react-quill
Description: Grammarly plugin for React + Quill
Latest version: 0.11.0

# Grammarly plugin for React + Quill

Bringing the Grammarly experience to apps that use [Quill](http://quilljs.com). No browser extension is required.

## Getting started

Install the Grammarly plugin for Quill:

```bash
npm install @grammarly/react-quill
```

Set up an instance of the Quill editor with Grammarly:

```tsx
// 1. Import Grammarly components
import { GrammarlyQuill } from "@grammarly/react-quill";

import React from "react";
import ReactQuill from "react-quill";

export function QuillEditor() {

  // 2. Render using <GrammarlyQuill>
  return (
    <GrammarlyQuill clientId="your-client-id-here">
      {({ setEditor }) => {
        <ReactQuill ref={quillRef => setEditor(quillRef.getEditor())}>
      }}
    </GrammarlyQuill>
  );
}
```
npm package: @grammarly/react-slate
Description: Grammarly plugin for React + Slate
Latest version: 0.11.2

# Grammarly plugin for React + Slate

Bringing the Grammarly experience to apps that use [Slate](https://github.com/ianstormtaylor/slate). No browser extension required.

## Getting started

Install the Grammarly plugin for Slate:

```bash
npm install @grammarly/react-slate
```

Set up an instance of the Slate editor with Grammarly:

```tsx
// 1. Import Grammarly components
import { GrammarlyEditable, GrammarlySlate } from "@grammarly/react-slate";

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

export function SlateEditor() {
  const [value, setValue] = useState([]);
  const editor = useMemo(() => withReact(createEditor()), []);

  // 2. Render using <GrammarlySlate> and <GrammarlyEditable>
  return (
    <Slate value={value} editor={editor} onChange={(value) => setValue(value)}>
      <GrammarlySlate value={value} clientId="your-client-id-here">
        <GrammarlyEditable />
      </GrammarlySlate>
    </Slate>
  );
}
```
npm package: @grammarly/react-textarea
Description: Grammarly plugin for React + textarea
Latest version: 0.11.2

# Grammarly plugin for React + textarea

Bringing the Grammarly experience to apps that use React and `<textarea>`. No browser extension required.

## Getting started

Install the Grammarly plugin:

```bash
npm install @grammarly/react-textarea
```

Use the provided `<GrammarlyTextarea>` instead of a regular `<textarea>`:

```tsx
import { GrammarlyTextArea } from "@grammarly/react-textarea";

import React, { useState } from "react";

export function TextareaEditor() {
  const [value, setValue] = useState("");

  return (
    <GrammarlyTextArea
      value={value}
      onChange={(event) => {
        setValue(event.target.value);
      }}
      clientId="your-client-id-here"
      rows={20}
    />
  );
}
```
npm package: @grammarly/textarea
Description: Grammarly plugin for textarea
Latest version: 0.11.2

# Grammarly plugin for textarea

Bringing the Grammarly experience to apps that use `<textarea>`. No browser extension required.

## Getting started

Add the Grammarly plugin:

```html
<script src="https://unpkg.com/@grammarly/textarea@latest"></script>
```

Add `data-grammarly` and `data-client-id` to your `<textarea>`:

<!-- prettier-ignore -->
```html
<textarea
  data-grammarly
  data-client-id="your-client-id-here"
  ...
></textarea>
```