Examples
React JS

Swalekh Integration Documentation for React.js

Overview

The Swalekh integration for React.js enhances user input experiences by enabling seamless transliteration and typing in various languages. This documentation provides step-by-step instructions on how to integrate Swalekh into a React application, allowing users to type in their preferred language using phonetic input.

Installation

Prerequisites

Before you begin, ensure you have the following:

  • A valid Validation Key. This key is essential for initializing Swalekh.
  • A React application set up (e.g., using Create React App).

Step 1: Include Swalekh Script

You need to include the Swalekh script in your public HTML file. Open public/index.html and add the following line inside the <head> tag:

<head>
  ...
  <script src="https://cdn.jsdelivr.net/npm/swalekh-sdk@2.6.0/swalekh.js"></script>
  ...
</head>

Step 2: Initialize Swalekh

In your React component (e.g., App.js), you will initialize Swalekh using your validation key. Below is an example of how to do this:

import React, { useEffect } from "react";
 
function App() {
  useEffect(() => {
    const validationKey = "YOUR-VALIDATION-KEY"; // Replace with your actual validation key
 
    const loadSwalekh = async () => {
      await window.initSwalekh({
        validationKey,
        creds:{
          querySel: '#swalekh-textarea', // Selector for your textarea
          lang: 'hi', // Language for transliteration (e.g., Hindi)
          mode: 'phonetic', // Input mode (e.g., phonetic)
          langToggle: true, // Enable language toggle
          modeToggle: true, // Enable mode toggle
        },
        optional: {
          theme: "reverie-red", // Specify the theme you want to use
        },
      });
    };
 
    window.addEventListener('load', () => {
      loadSwalekh();
    });
 
    // Cleanup the event listener on unmount
    return () => {
      window.removeEventListener('load', loadSwalekh);
    };
  }, []);
 
  return (
    <div>
      <h1>Swalekh Integration Example</h1>
      <textarea id="swalekh-textarea" rows="5" placeholder="Type here..."></textarea>
    </div>
  );
}
 
export default App;

Explanation

  1. Script Inclusion:

    • The Swalekh script is included in the HTML file to ensure it is accessible throughout the application.

  2. useEffect Hook:

    • The useEffect hook initializes Swalekh when the component mounts.
    • The loadSwalekh function initializes Swalekh with your validation key and the desired configurations.
    • An event listener is added to the window load event to ensure Swalekh loads only after the window is fully loaded.
    • Cleanup for the event listener is provided to prevent memory leaks when the component unmounts.

Usage

To use Swalekh in your application:

  1. Add the <textarea> element where you want to enable typing:
<textarea id="swalekh-textarea" rows="5" placeholder="Type here..."></textarea>
  1. Adjust the parameters in loadSwalekh to match your requirements, such as changing the lang parameter for different languages or modifying the theme.

Troubleshooting

  • Validation Key Issues: Ensure you are using a valid and active validation key.
  • Script Not Loading: Verify that the script URL is correct and accessible.
  • Textarea Not Found: Ensure that the querySel matches the textarea element in your HTML.

Conclusion

By following the steps outlined in this documentation, you can successfully integrate Swalekh into your React application, allowing users to input text in various languages using phonetic transliteration. For further assistance, please refer to the Swalekh API Documentation or contact our support team.

Vanilla JSNext JS