spellcore-react

spellcore-react

React bindings and UI components for the SpellCore ecosystem.

This library provides an out-of-the-box floating overlay and custom React hooks that make embedding spell checking into textareas or custom editors trivially easy.

Installation

npm install spellcore-react spellcore-core

Usage

The useSpellCheck Hook

This hook automatically manages debouncing your text input, communicating with the core engine (or a web worker), and managing the results state.

const { 
    result,                // The SpellCheckResult object
    isChecking,            // Loading boolean
    addWordToDictionary,   // Function to ignore a word
    replaceWord            // Function to replace a misspelled word
} = useSpellCheck(textInput, { debounceMs: 500 });

The SpellCheckOverlay Component

This component acts as a transparent overlay over your textarea. It renders red squiggly lines underneath misspelled words and provides a click-to-open floating menu with suggestions.

import { SpellCheckOverlay, useSpellCheck } from 'spellcore-react';

// Make sure your container is position: relative
<div style={{ position: 'relative' }}>
    <textarea value={text} onChange={e => setText(e.target.value)} />
    
    <SpellCheckOverlay 
        result={result}
        onReplace={replaceWord}
        onIgnore={addWordToDictionary}
    />
</div>