DEV Community

Jarvis Silva
Jarvis Silva

Posted on • Edited on

Building a zawgyi to unicode converter in next js

Next.js is a popular framework for building React applications, and if you are working with Burmese text, you might come across Zawgyi encoding. Zawgyi is a legacy font encoding widely used in Myanmar, but it has limitations and compatibility issues with Unicode. To convert Zawgyi-encoded text to Unicode in a Next.js application, we can utilize the Rabbit-Node library. This tutorial will guide you through the process.

Before creating look at how this converter works: Zawgyi to unicode converter

Step 1: Set Up a Next.js Project
Before we begin, ensure that you have Node.js and npm installed on your machine. Open your terminal and execute the following commands to create a new Next.js project:

npx create-next-app my-zawgyi-converter
cd my-zawgyi-converter
Enter fullscreen mode Exit fullscreen mode

Step 2: Install the Rabbit-Node Library
In your project directory, install the Rabbit-Node library by running the following command:

npm install rabbit-node
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a Conversion Function
In the project's root directory, create a new file named zawgyiConverter.js and add the following code:

import Rabbit from 'rabbit-node';

const converter = Rabbit.zg2uni;

export const convertZawgyiToUnicode = (text) => {
  return converter(text);
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Implement Conversion in a Next.js Component
Next, create a new file named MyComponent.js in the pages directory and replace the existing code with the following:

import { useState } from 'react';
import { convertZawgyiToUnicode } from '../zawgyiConverter';

const MyComponent = () => {
  const [zawgyiText, setZawgyiText] = useState('');
  const [unicodeText, setUnicodeText] = useState('');

  const handleConversion = () => {
    const convertedText = convertZawgyiToUnicode(zawgyiText);
    setUnicodeText(convertedText);
  };

  return (
    <div>
      <textarea
        value={zawgyiText}
        onChange={(e) => setZawgyiText(e.target.value)}
        placeholder="Enter Zawgyi text..."
      />
      <button onClick={handleConversion}>Convert</button>
      <p>Unicode Text: {unicodeText}</p>
    </div>
  );
};

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Step 5: Test the Zawgyi to Unicode Conversion
To test the Zawgyi to Unicode conversion, open the pages/index.js file and replace the existing code with the following:

import MyComponent from './MyComponent';

const Home = () => {
  return <MyComponent />;
};

export default Home;
Enter fullscreen mode Exit fullscreen mode

Step 6: Start the Next.js Development Server
Now, start the Next.js development server by running the following command in your terminal:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Once the server starts, open your browser and navigate to http://localhost:3000. You should see a text area where you can enter Zawgyi-encoded text. Upon clicking the "Convert" button, the converted Unicode text will be displayed below.

Congratulations! You have successfully implemented Zawgyi to Unicode conversion in a Next.js application using the Rabbit-Node library.

Conclusion
In this tutorial, we walked through the process of converting Zawgyi-encoded text to Unicode in a Next.js application. By following these steps, you can integrate the Rabbit-Node library and ensure proper rendering of Burmese text in your Next.js projects.

If you are looking for tools to convert fonts to unicode then go check this website fontunicoder

Top comments (0)