Examples
Next JS

Swalekh Portal Integration Documentation for Next js

Overview

Swalekh Portal is designed to enhance user input experience by providing seamless transliteration and typing in various languages. This documentation outlines how to integrate Swalekh using Next.js, 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 Next.js application set up.

Step 1: Include Swalekh Script (App Router)

In your layout.js file, include the Swalekh script to make it available across your application.

"use client"
import "./globals.css";
 
export const metadata = {
  title: "Swalekh Portal",
  description: "Integration of Swalekh for enhanced input experience",
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script src="https://cdn.jsdelivr.net/npm/swalekh-sdk@2.6.0/swalekh.js" />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

Step 1: Include Swalekh Script (Page Router)

In your layout.js file, include the Swalekh script to make it available across your application.

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

Step 2: Initialize Swalekh

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

"use client";
import { useEffect } from "react";
 
export default function HomePage() {
  useEffect(() => {
    const validationKey = "YOUR-VALIDATION-KEY"; // Replace with your actual validation key
 
    const loadSwalekh = async () => {
      await window.initSwalekh({
        validationKey,
        creds:{
          querySel: '#swalekh-textarea3', // 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', function () {
      loadSwalekh();
    });
 
    // Cleanup the event listener on unmount
    return () => {
      window.removeEventListener('load', loadSwalekh);
    };
  }, []);
 
  return (
    <div>
      <h1>Swalekh Integration Example</h1>
      <textarea id="swalekh-textarea3" rows="5" placeholder="Type here..."></textarea>
    </div>
  );
}

Explanation

  1. layout.js:

    • The Swalekh script is included in the <head> section to ensure it is available throughout your application.
    • The layout component wraps your application and sets up global styles.

  2. page.js:

    • The useEffect hook initializes Swalekh once 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.

Usage

To use Swalekh in your application:

  1. Add the <textarea> element where you want to enable typing:
<textarea id="swalekh-textarea3" 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 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.

React JSCustom Endpoint