Add a Japanese Text Input to Your Site

Want your users to be able to type in Hiragana or Katakana by default? The WanaKana IME is your answer. In this short tutorial I'll teach you how to implement the IME in both React and HTML. More information about WanaKana can be found here. Let's begin!

Using WanaKana with HTML

As much as I love the WanaKana API, I found their documentation to not be the most user-friendly for quick answers and implementation. Hopefully this guide will answer any questions you may have. Start by creating a basic HTML file.

Add this script to the header:

<script src="https://unpkg.com/wanakana"></script>

Now, create a textarea with 4 rows and 50 cols. Make sure to give the textarea an id that we can use for the JavaScript portion. Your file might look similar to this:

 <label for="hiragana-input">
     Type Romaji below and WanaKana will convert it to Hiragana. Hold shift
     and type Romaji to write in Katakana.
 </label>
 <textarea 
    id="hiragana-input" 
    rows="4" 
    cols="50"> 
 </textarea>

All that's left really is adding this JS:

 <script>
      const textInput = document.getElementById("hiragana-input");
      wanakana.bind(textInput);
 </script>

Tada! Now you can write in Hiragana or Katakana (hold shift) in your browser. With some simple styles you should see something like this in your browser:

Using WanaKana in React

Typing in Japanese in an HTML file is awesome, but without a framework like React, its uses can be pretty limited. To start, install and import WanaKana and useState into your React project:

npm install wanakana

import { useState } from "react";

import * as wanakana from "wanakana";

Create a Keyboard component and import it in your main App component. Now, open your Keyboard component file and add the following state variables. For this tutorial, we will pretend we are creating a small journal app and want to see the journal entry as we type it:

 const [textInput, setTextInput] = useState("");
 const [journalEntry, setJournalEntry] = useState("");

Let's create our handleChange function next!

 const handleChange = (event) => {
    let romaji = wanakana.toKana(event.currentTarget.value, {
      IMEMode: true,
    });
    setTextInput(romaji);
    setJournalEntry(romaji);
  };

The only step left is to write our textarea and label.

<p>{journalEntry}</p>
      <label>
        Convert your text to Hiragana! Hold shift or turn on caps lock to write
        Katakana.
      </label>
      <textarea
        id="hiragana-input"
        value={textInput}
        onChange={(event) => handleChange(event)}
        rows={4}
        cols={50}
      ></textarea>

Congratulations! Now you can use WanaKana in both HTML and React. Your React project should look similar to this:

Project Ideas

Here are some project ideas to get you going with experimenting with the WanaKana IME!

• Journal app for language learning
• Japanese quiz app or flashcard app
• Penpal app - think something similar to the Shimagurashi app.

Thanks for reading this tutorial, I hope you found it useful!! 🦋