How to check spelling for cell values within a selected range in React Spreadsheet?

This knowledge base article explains how to check the spelling of cell values within a selected range in a React Spreadsheet.

This can be achieved using Typo.js, an external library that checks the spelling of cell values in the selectedRange. With this library, you can identify misspelled words, retrieve suggestions for corrections, and log the misspelled words along with their cell address and index to the console.

Additionally, the updateCell method in the spreadsheet can be used to update cell values based on the provided spelling suggestions.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective, ColumnDirective, getRangeIndexes, getCell, getCellAddress } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';
import Typo from 'typo-js';

const Default = () => {
   let spreadsheet;
   const spellCheck = () => {
       //External dictionary used for Spell check and suggestions.
       const dictionary = new Typo('en_US');
       const range = spreadsheet.getActiveSheet().selectedRange;
       //Get the row and column indexes of the selected range.
       const rangeIndexes = getRangeIndexes(range);
       let cellValue;
       let words = [];
       for (let i = rangeIndexes[0]; i <= rangeIndexes[2]; i++) {
           for (let j = rangeIndexes[1]; j <= rangeIndexes[3]; j++) {
               let cell = getCell(i, j, spreadsheet.getActiveSheet());
               //Get the address of the cell.
               let cellAddress = getCellAddress(i,j);
               cellValue = cell ? (cell.value ? cell.value : '') : '';
               cellValue = cellValue.split(' ');
               for (let k = 0; k < cellValue.length; k++) {
                   //Store the index of the word in a cell.
                   let valueIndex = k;
                   words.push({"value": cellValue[k], "address": cellAddress, "index": valueIndex});
               }
           }
       }
       // Array to store misspelled words
       let misspelledWords = [];
       // Check each word for spelling errors
       words.forEach(word => {
           if (!dictionary.check(word.value)) {
               //Get the suggestions for the misspelled words.
               const suggestions = dictionary.suggest(word.value);
               misspelledWords.push({ word, suggestions });
           }
       });
       if (misspelledWords.length > 0) {
           misspelledWords.forEach(misspelledWord => {
               //Log the mispelled words with its cell address, index of the value and suggestions.
               console.log(misspelledWord);
           });
       } else {
           console.log("No misspelled words found!!")
       }
   }
   return (<div className='control-pane'>
           <div className='control-section spreadsheet-control'>
               <button className="e-btn" onClick={spellCheck}>Spell check</button>
               <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} >
                   <SheetsDirective>
                       <SheetDirective name="Car Sales Report">
                           <RangesDirective>
                               <RangeDirective dataSource={defaultData}></RangeDirective>
                           </RangesDirective>
                           <ColumnsDirective>
                               <ColumnDirective width={180}></ColumnDirective>
                               <ColumnDirective width={130}></ColumnDirective>
                               <ColumnDirective width={130}></ColumnDirective>
                               <ColumnDirective width={180}></ColumnDirective>
                               <ColumnDirective width={130}></ColumnDirective>
                               <ColumnDirective width={120}></ColumnDirective>
                           </ColumnsDirective>
                       </SheetDirective>
                   </SheetsDirective>
               </SpreadsheetComponent>
           </div>
       </div>);
}
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />); 

Sample Link: https://stackblitz.com/edit/react-dtfrus-a9t6mf?file=index.js

Output: