Bing Spell Check in SPFx

This article demonstrates how to implement Bing Spell Check functionality using Azure Cognitive Services in the SharePoint Framework (SPFx) web part.
This feature helps validate and correct misspelled words in user input fields directly within SharePoint pages.

⚙️ Install Required Libraries

Run the following commands to install dependencies:

npm install office-ui-fabric-react --save
npm install @pnp/spfx-controls-react --save

🧩 Implement Bing Spell Check Functionality

Define the State Interface

Create a new file under src/webparts/<yourwebpartname>/components/ named ISpfxAzureBingSpellCheckState.ts:

export interface ISpfxAzureBingSpellCheckState {
  content: string;
  processedcontent: string;
}

Update the Main Component

Edit your main React component (e.g., SpfxAzureBingSpellCheck.tsx) with the following code:

import * as React from 'react';
import styles from './SpfxAzureBingSpellCheck.module.scss';
import { ISpfxAzureBingSpellCheckProps } from './ISpfxAzureBingSpellCheckProps';
import { ISpfxAzureBingSpellCheckState } from './ISpfxAzureBingSpellCheckState';
import { Stack, TextField, PrimaryButton, Label } from 'office-ui-fabric-react';

const columnProps = { tokens: { childrenGap: 15 } };

export default class SpfxAzureBingSpellCheck extends React.Component<ISpfxAzureBingSpellCheckProps, ISpfxAzureBingSpellCheckState> {
  constructor(props: ISpfxAzureBingSpellCheckProps) {
    super(props);
    this.state = { content: '', processedcontent: '' };
  }

  private processClicked = async (): Promise<void> => {
    const apiKey = "ENTER_YOUR_BING_SPELLCHECK_KEY";
    const endpoint = "https://api.cognitive.microsoft.com/bing/v7.0/spellcheck";
    const text = this.state.content;

    const formData = `Text=${encodeURIComponent(text)}`;
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Ocp-Apim-Subscription-Key': apiKey
      },
      body: formData
    });

    const jsonResponse = await response.json();
    let correctedText = text;

    jsonResponse.flaggedTokens.forEach((token: any) => {
      correctedText = correctedText.replace(token.token, token.suggestions[0].suggestion);
    });

    this.setState({ processedcontent: correctedText });
  };

  public render(): React.ReactElement<ISpfxAzureBingSpellCheckProps> {
    return (
      <div className={styles.spfxAzureBingSpellCheck}>
        <Stack tokens={{ childrenGap: 20 }}>
          <TextField
            label="Original Text"
            multiline
            autoAdjustHeight
            value={this.state.content}
            onChange={(e, newValue) => this.setState({ content: newValue || '' })}
          />
          <PrimaryButton text="Check Spell" onClick={this.processClicked} />
          <Label>{this.state.processedcontent}</Label>
        </Stack>
      </div>
    );
  }
}

🧠 How It Works

The user types text in the TextField.
On clicking Check Spell, the text is sent to the Azure Bing Spell Check API.
The response returns corrections for any flagged tokens, which are then replaced and displayed.

🚀 Build and Deploy

Run the following commands to build and package your web part:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file from sharepoint/solution to your App Catalog, then add the web part to your SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Bing Spell Check in SPFx

GitHub

✅ Summary

The Bing Spell Check API from Azure Cognitive Services can easily be integrated into SPFx solutions to validate user input in real-time.
It’s a great example of combining Microsoft’s cloud AI capabilities with SharePoint’s extensibility.