Skip to content
Learni
View all tutorials
Intégrations Outils

How to Integrate Grammarly in a React Project in 2026

18 minEXPERT
ReactAPIGrammarly
Lire en français

Introduction

Grammarly helps improve text quality in modern web applications. In 2026, its API integration provides precise control over real-time grammar and style corrections. This tutorial guides you step by step through implementing it in React by combining user interface components with server-side logic.

Prerequisites

  • Node.js 20+ and React 18
  • Grammarly Business account with API key
  • Solid knowledge of TypeScript and Next.js

Install Dependencies

terminal
npm install @grammarly/editor-sdk-react axios
npm install -D @types/node

This command installs the official Grammarly React SDK and Axios for API calls. Avoid outdated versions that cause conflicts with React hooks.

Configure the .env File

.env.local
NEXT_PUBLIC_GRAMMARLY_CLIENT_ID=votre_client_id
GRAMMARLY_API_KEY=votre_cle_api_secrete

Store your Grammarly credentials in environment variables. Never expose them on the client side for security reasons.

React Component with Grammarly

components/GrammarlyEditor.tsx
import React from 'react';
import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react';

export const GrammarlyEditor: React.FC = () => {
  return (
    <div style={{ height: '400px' }}>
      <textarea placeholder="Rédigez votre texte ici..." />
      <GrammarlyEditorPlugin clientId={process.env.NEXT_PUBLIC_GRAMMARLY_CLIENT_ID!} />
    </div>
  );
};

This component integrates the Grammarly plugin directly into a textarea. The clientId enables real-time suggestions without page reloads.

API Route for Advanced Checking

app/api/grammarly/route.ts
import { NextResponse } from 'next/server';
import axios from 'axios';

export async function POST(request: Request) {
  const { text } = await request.json();
  const response = await axios.post('https://api.grammarly.com/v1/check', { text }, {
    headers: { Authorization: `Bearer ${process.env.GRAMMARLY_API_KEY}` }
  });
  return NextResponse.json(response.data);
}

This secure server route sends text to the Grammarly API and returns corrections. Handle 429 errors for rate limiting.

Custom Hook for API Calls

hooks/useGrammarlyCheck.ts
import { useState } from 'react';

export function useGrammarlyCheck() {
  const [corrections, setCorrections] = useState([]);
  const checkText = async (text: string) => {
    const res = await fetch('/api/grammarly', { method: 'POST', body: JSON.stringify({ text }) });
    const data = await res.json();
    setCorrections(data.suggestions);
  };
  return { corrections, checkText };
}

This React hook encapsulates the API call logic. It enables easy reuse across multiple components while maintaining suggestion state.

Best Practices

  • Always validate user input before sending to the API
  • Use Grammarly's offline mode for sensitive text
  • Limit API calls to 1 per second
  • Cache results for 30 seconds
  • Test with multilingual text

Common Mistakes to Avoid

  • Forgetting to hide the API key on the client side
  • Ignoring API rate limits
  • Not handling network errors in hooks
  • Using incompatible versions of the React SDK

Going Further

Explore advanced Grammarly API features and discover our training programs to master complex integrations.