Swalekh Installation Guide for Next.js

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 Next.js application.

Installation

Step 1: Add Swalekh Script

To include the Swalekh library in your Next.js project, you can add the following script tag to the <Head> component in your pages/_app.js or directly in a specific page file:

//document.js
<Head>
    <script src="https://cdn.jsdelivr.net/npm/swalekh-sdk@2.6.0/swalekh.js" />
</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:

// /component/SwalekhInput.js
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" style={{padding:"14px"}} rows="20" cols="100" 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., pages/index.js):

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

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 page.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>
            <SwalekhInput ref={swlInputRef} />
        </div>
    );
};

Conclusion

By following this guide, you can successfully integrate Swalekh into your Next.js 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.

Next JS(App Router)Languages