Are you creating an application targeting regional users? Do you need to provide your users a way to type in Indian languages? Are you using React? Here is a quick demo of how you can allow your Website users to easily type in Assamese, Bengali, Gujarati, Hindi, Malayalam, Tamil, Telugu and other 23 Indian languages.
Environment
Make sure you have React environment ready. Also download PramukhIME Javascript library from the above link.
Setup React Hello World
Here are the steps to setup a new React Hello World application. If you are already familiar with it, you may skip this section.
Open up command prompt and navigate to the directory where you want to create a new React application.
Execute following command to create a new React Hello World application.
create-react-app pramukhime-react-demo
cd pramukhime-react-demoUsing a text editor, open /path/to/pramukhime-react-demo/src/App.js and replace the contents with:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br />
<input type="text" placeholder="Type in Sanskrit" />
</header>
</div>
);
}
export default App;
Execute the following command to start the application
npm run startAbove command compiles application and starts the browser with URL http://localhost:3000/
Integrate PramukhIME Javascript Library
Now you are ready to integrate PramukhIME Javascript Library within your project. Once you download the library zip file, unzip it on your local drive for quick use.
Copy the entire “pramukhime” folder to “public” folder with react app so that the file pramukhime-react-demo/public/pramukhime/js/pramukhime.js exists.
Using a text editor, open /path/to/pramukhime-react-demo/src/App.js and replace the contents with:
import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';
function App() {
useEffect(() => {
window.pramukhIME.setLanguage('sanskrit', 'pramukhindic');
window.pramukhIME.enable();
return function cleanup() {
window.pramukhIME.disable();
}
});
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br />
<input type="text" placeholder="Type in Sanskrit" />
</header>
</div>
);
}
export default App;
Using a text editor, open /path/to/pramukhime-react-demo/public/index.html and replace the contents with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="%PUBLIC_URL%/pramukhime/js/pramukhime.js"></script>
</body>
</html>
Execute the following command to start the application
npm run startYou will see a textbox in React application. Try to type “pramukham” in a textbox and you will see the Sanskrit letters.
Download Example
Click on the following button to download the React 17 example
Unzip the file to your local machine in a folder “pramukhime-react-demo”.
Open command prompt and make unzipped folder as your current directory within command prompt using “cd” command.
Download latest version of PramukhIME Javascript Library for typing in Indian languages. Copy the entire “pramukhime” folder to “public” folder with react app so that the file pramukhime-react-demo/public/pramukhime/js/pramukhime.js exists.
Execute following commands on command prompt to setup environment and start the application.
cd /path/to/pramukhime-react-demo
npm install
npm run startAnd now you will be able to type in Sanskrit in a textbox available on the site.