react-word-spell-checker

🧠 A lightweight, fully customizable React component for real-time word spell checking using nspell. Works offline – no API required.

✨ Features

• 🔍 Real-time spell checking while typing
• ✅ Fully offline (uses local Hunspell dictionary files)
• 🧩 Customizable dropdown rendering
• 💬 Works with <textarea> or <input>
• 📦 Easy to integrate into any React app

📦 Installation

npm install react-word-spell-checker
# or
yarn add react-word-spell-checker

🚀 Usage

Use SpellCheckerWrapper to wrap any controlled input or textarea and enable real-time spell checking:

import { useState } from "react";
import { SpellCheckerWrapper } from "react-word-spell-checker";

function App() {
  const [text, setText] = useState("");

  return (
    <div style={{ maxWidth: 600, margin: "2rem auto" }}>
      <SpellCheckerWrapper value={text} onChange={setText}>
        <textarea placeholder="Type here..." />
      </SpellCheckerWrapper>
    </div>
  );
}

🎨 Custom Dropdown (Optional)

Customize the suggestion dropdown by providing a renderDropdown prop:

<SpellCheckerWrapper
  value={text}
  onChange={setText}
  renderDropdown={(suggestions, onSelect) => (
    <ul
      style={{
        background: "#fff",
        border: "1px solid #ccc",
        padding: 0,
        listStyle: "none",
      }}
    >
      {suggestions.map((s) => (
        <li
          key={s}
          onClick={() => onSelect(s)}
          style={{ padding: "8px", cursor: "pointer" }}
        >
          🔠 {s}
        </li>
      ))}
    </ul>
  )}
>
  <textarea />
</SpellCheckerWrapper>

🔧 Props

| Prop | Type | Description | | ----------------- | -------------------------------------------------- | -------------------------------------------- | | value | string | Controlled value for the input or textarea | | onChange | (val: string) => void | Callback when the text changes | | children | ReactElement | The actual <textarea> or <input> element | | className | string | Optional class name for the wrapper div | | renderDropdown | (suggestions: string[], select: fn) => ReactNode | Optional function to customize dropdown UI | | suggestionLimit | number | Max number of suggestions (default: 10) |

📁 How It Works

• 📚 Loads local Hunspell .aff and .dic dictionary files using Vite’s ?raw import
• 🧠 Uses nspell to check spelling and suggest corrections
• 🔄 Monitors the last word typed for accuracy and displays suggestions
• 🔌 Works 100% offline — no backend or API calls

🛠 Built With

• React
• nspell
• Vite
• TypeScript

🧪 Local Development & Testing

To test your package locally in another app:

npm run build
npm pack
# You'll get: react-word-spell-checker-1.0.0.tgz

# In another React app:
npm install /path/to/react-word-spell-checker-1.0.0.tgz

🧾 License

MIT © Muhammad Muzammil