Skip to content
Learni
Voir tous les tutoriels
Intégrations Outils

Comment intégrer Grammarly dans un projet React en 2026

18 minEXPERT
ReactAPIGrammarly
Read in English

Introduction

Grammarly permet d'améliorer la qualité des textes dans les applications web modernes. En 2026, son intégration via API offre un contrôle précis sur la correction grammaticale et stylistique en temps réel. Ce tutoriel vous guide pas à pas pour l'implémenter dans React, en combinant interface utilisateur et logique serveur.

Prérequis

  • Node.js 20+ et React 18
  • Compte Grammarly Business avec clé API
  • Connaissances solides en TypeScript et Next.js

Installation des dépendances

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

Cette commande installe le SDK officiel React de Grammarly et Axios pour les appels API. Évitez les versions obsolètes qui causent des conflits avec les hooks React.

Configuration du fichier .env

.env.local
NEXT_PUBLIC_GRAMMARLY_CLIENT_ID=votre_client_id
GRAMMARLY_API_KEY=votre_cle_api_secrete

Stockez vos identifiants Grammarly dans les variables d'environnement. Ne jamais les exposer côté client pour des raisons de sécurité.

Composant React avec 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>
  );
};

Ce composant intègre le plugin Grammarly directement dans un textarea. Le clientId active les suggestions en temps réel sans rechargement de page.

Route API pour vérification avancée

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);
}

Cette route serveur sécurisée envoie le texte à l'API Grammarly et retourne les corrections. Gérez les erreurs 429 pour le rate limiting.

Hook personnalisé pour appels API

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 };
}

Ce hook React encapsule la logique d'appel API. Il permet une réutilisation facile dans plusieurs composants tout en maintenant l'état des suggestions.

Bonnes pratiques

  • Validez toujours les entrées utilisateur avant envoi à l'API
  • Utilisez le mode offline de Grammarly pour les textes sensibles
  • Limitez les appels API à 1 par seconde
  • Cachez les résultats pendant 30 secondes
  • Testez avec des textes multilingues

Erreurs courantes à éviter

  • Oublier de masquer la clé API côté client
  • Ignorer les limites de taux de l'API
  • Ne pas gérer les erreurs réseau dans les hooks
  • Utiliser des versions incompatibles du SDK React

Pour aller plus loin

Explorez les fonctionnalités avancées de l'API Grammarly et découvrez nos formations Learni pour maîtriser les intégrations complexes.