Add Amharic keyboard to your website using Keywrite

Keywrite a Javascript library that allows you to type non-latin scripts in any web based application using a standard keyboard. See the Docs for more info.

In this post, I will show you how you can add Keywrite along with pre-made input-methods for Ethiopic scripts to a web application and start typing in Amharic.

We will create a simple webpack project. Lets start by initializing our project:

$ mkdir keywrite-amharic-demo
$ cd keywrite-amharic-demo
$ yarn init
$ yarn add webpack webpack-cli @keywrite/web @keywrite/ethiopic-input-methods

If you already have a project, you can just add the @keywrite/web and @keywrite/ethiopic-input-methods libraries to your project.

Now create an index.js file in the src folder and add the following code:

import KeywriteWeb from "@keywrite/web";
import { Amharic } from "@keywrite/ethiopic-input-methods";
const nameInput = () => {
  const element = document.createElement("div");
  element.classList = "row";
  element.innerHTML = `
  <div class="col-6">
  <label for="inputName" class="visually-hidden">Name</label>
  <input type="text" class="form-control" id="inputName" placeholder="Name">
  </div>
  <div class="col-2">
  <button id="btnName" class="btn btn-success mb-3">ON</button>
  </div>`;
  return element;
};

const bioInput = () => {
  const element = document.createElement("div");
  element.classList = "row";
  element.innerHTML = `
  <div class="col-6">
  <div>
  <label for="exampleFormControlTextarea1" class="visually-hidden">Example textarea</label>
  <textarea class="form-control" id="inputBio" rows="3" placeholder="Bio"></textarea>
</div>
  </div>
  <div class="col-2">
    <button id="btnBio" class="btn btn-success mb-3">ON</button>
  </div>`;
  return element;
};
const formContainer = () => {
  const container = document.createElement("div");
  container.classList = "container mt-4";
  container.appendChild(nameInput());
  container.appendChild(bioInput());
  return container;
};
const navbar = () => {
  const nav = document.createElement("nav");
  nav.classList = "navbar navbar-light bg-light";
  nav.innerHTML = `<div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="https://github.com/eyuelberga/keywrite/raw/master/logo/logo.png" alt="" height="35" class="d-inline-block align-text-top">
      simple demo for @keywrite/web
    </a>
  </div>`;
  return nav;
};
const addToggle = (instance, btnId) => {
  const id = `#${btnId}`;
  const btn = document.querySelector(id);
  btn.addEventListener("click", () => {
    instance.on = !instance.on;
    btn.classList = `btn mb-3 ${instance.on ? "btn-success" : "btn-danger"}`;
    btn.innerHTML = `${instance.on ? "ON" : "OFF"}`;
  });
};
const app = document.getElementById("app");
app.appendChild(navbar());
app.appendChild(formContainer());

const inputInstance = new KeywriteWeb(app.querySelector("input"), {
  Amharic: Amharic.inputMethod
});
const textareaInstance = new KeywriteWeb(app.querySelector("textarea"), {
  Amharic: Amharic.inputMethod
});
addToggle(inputInstance, "btnName");
addToggle(textareaInstance, "btnBio");

We have created two components for the name and bio inputs,these are the nameInput and bioInput functions. We also create a new instance of KeywriteWeb with the HTMLInputElement or HTMLTextareaElement. Using the on property we toggle the keyboard on and off. This is what the AddToggle function does.

Also update the index.html file in the dist folder to look like this:

<!DOCTYPE html>
<html>

<head>
    <title>Keywrite Demo</title>
    <meta charset="UTF-8" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="main.js">
    </script>
</body>

</html>

The finished app looks like this:

That's it! Now you should have a working Amharic keyboard in your web app. Hope you like the post, please share your comments and suggestions in the discussion below.

https://github.com/eyuelberga/keywrite