Swalekh Installation Guide for React

Overview

Swalekh provides a seamless input experience by enabling users to type in various languages using phonetic transliteration. This guide will help you set up Swalekh in your React application.

Installation

Step 1: Install Swalekh Library

First, ensure you have the Swalekh script available in your project. You can add the following script tag to the <head> section of your public/index.html file:

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

Step 2: Create a Swalekh Component

Create a new React component (e.g., SwalekhInput.js) to encapsulate the Swalekh functionality. Here’s an example:

import React, { useEffect } from "react";
 
const SwalekhInput = () => {
  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)
      }
    });
  };
 
  const unloadSwalekh = async () => {
    await window.unloadSwalekh({
      querySel: "#swalekh-textarea", // The same querySel used in loadSwalekh
    });
  };
 
  useEffect(() => {
    loadSwalekh();
 
    // Cleanup function to unload Swalekh when the component unmounts
    return () => {
      unloadSwalekh();
    };
  }, []);
 
  return (
    <textarea
      id="swalekh-textarea"
      rows="5"
      placeholder="Type here..."
    ></textarea>
  );
};
 
export default SwalekhInput;

Step 3: Use the Swalekh Component

You can now use the SwalekhInput component in your main application file (e.g., App.js):

import React from "react";
import SwalekhInput from "./SwalekhInput";
 
const App = () => {
  return (
    <div>
      <h1>Swalekh Integration Example</h1>
      <SwalekhInput />
    </div>
  );
};
 
export default App;

Step 4: Handling Language and Mode Changes

If you want to programmatically change the language or mode, you can expose functions from the SwalekhInput component. Here’s an example:

const SwalekhInput = () => {
  // ... (existing code)
 
    useEffect(() => {
        loadSwalekh(language, mode);
        return () => unloadSwalekh(); // Cleanup on unmount
    }, [language, mode]); // Reloads only if language or mode changes
 
    const triggerLanguageChange = async (newLanguage) => {
        setLanguage(newLanguage);
    };
 
    const triggerModeChange = async (newMode) => {
        setMode(newMode);
    };
  // ... (rest of the component)
};

Example of Changing Language or Mode

To change the language or mode, you can add buttons or dropdowns in your App.js and call the corresponding methods from SwalekhInput.

const App = () => {
    const swlInputRef = React.useRef();
 
    useEffect(() => {
        loadSwalekh(language, mode);
        return () => unloadSwalekh(); // Cleanup on unmount
    }, [language, mode]); // Reloads only if language or mode changes
 
    const triggerLanguageChange = async (newLanguage) => {
        setLanguage(newLanguage);
    };
 
    const triggerModeChange = async (newMode) => {
        setMode(newMode);
    };
 
 
  return (
    <div>
      <h1>Swalekh Integration Example</h1>
        <div>
            <label>Select Language: </label>
            <select onChange={(e) => triggerLanguageChange(e.target.value)} value={language}>
                <option value="hi">Hindi</option>
                <option value="en">English</option>
                <option value="bn">Bengali</option>
                <option value="mr">Marathi</option>
            </select>
 
            <button onClick={() => triggerModeChange(mode === "phonetic" ? "keyboard" : "phonetic")}>
                Toggle Mode ({mode})
            </button>
        </div>
 
  );
};

Conclusion

By following this guide, 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 JS Next JS(App Router)