hanifi-rohingya-keyboard

A free, predictable on-screen and physical keyboard for typing the Hanifi Rohingya script (right-to-left, tonal, Unicode block U+10D00–U+10D3F) in any React app.

• Every key shows both its plain and Shift-revealed character at once — the whole layout is guessable without ever pressing Shift first.
• Physical keyboard support, driven by the exact same keymap as the on-screen board.
• A lockable Shift key for typing a run of tone marks without re-tapping each time.
• Built-in language toggle to hand typing back to the device's normal keyboard for English.
• Attach it to a single form field, drop in a full-page widget, or build your own UI on the raw keymap — pick whichever fits.

Install

npm install hanifi-rohingya-keyboard

react and react-dom (18+) are peer dependencies — this package doesn't bundle its own copy.

Two things you need to set up

1. Tailwind must see this package's files. The components are styled with Tailwind utility classes directly (no separate CSS file is shipped), so your tailwind.config needs to include this package in its content array or the classes will get purged:

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./node_modules/hanifi-rohingya-keyboard/dist/**/*.{js,mjs}",
  ],
  // ...
};

2. Load the Hanifi Rohingya font. The components reference 'Noto Sans Hanifi Rohingya' — without it loaded, the glyphs render as empty boxes on most systems. Easiest is Google Fonts, e.g. in app/layout.tsx with next/font/google, or a plain <link> tag.

Which export do I want?

| Export | Use it when... | |---|---| | HanifiInput | You want to drop Hanifi typing into an existing form — a name field, a comment box, a search input. Keyboard panel appears on focus, hides on blur/outside-click. | | HanifiKeyboard | You want a self-contained full-page typing tool — its own text field, language switch, copy button, on-screen board, all built in. | | HanifiKeyboardPanel + useHanifiKeyboard | You need full control over layout/positioning — build your own field and popover placement, the hook handles all the typing logic. | | Raw keymap exports (PHYSICAL_KEYMAP, charForKey, etc.) | You're building something that doesn't fit any of the above — a mobile app, a canvas-based editor, anything non-standard. |

HanifiInput — attach to a form field

import { HanifiInput } from "hanifi-rohingya-keyboard";
import { useState } from "react";

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <HanifiInput
        value={name}
        onChange={setName}
        placeholder="Type your name in Hanifi..."
      />
    </form>
  );
}

For a multi-line field, add multiline (renders a <textarea> instead of an <input>):

<HanifiInput multiline rows={4} onChange={setDescription} />

Props: value, onChange, defaultValue (uncontrolled), placeholder, multiline, rows, className, showLanguageToggle (default true), defaultLanguage ('hanifi' or 'english'), plus standard name, id, required, disabled.

HanifiKeyboard — full-page widget

import { HanifiKeyboard } from "hanifi-rohingya-keyboard";

export default function Page() {
  return <HanifiKeyboard />;
}

Self-contained — no props required.

useHanifiKeyboard + HanifiKeyboardPanel — build your own layout

If HanifiInput's built-in popover positioning doesn't fit your design, use the hook directly and render the panel wherever you want:

import { useHanifiKeyboard, HanifiKeyboardPanel } from "hanifi-rohingya-keyboard";

function CustomField() {
  const {
    inputRef, value, setValue, shiftMode,
    showKeyboard, handleFocus, handleBlur, handleVirtualKey,
  } = useHanifiKeyboard<HTMLInputElement>();

  return (
    <div>
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onFocus={handleFocus}
        onBlur={handleBlur}
        dir="rtl"
        inputMode="none"
      />
      {showKeyboard && (
        <HanifiKeyboardPanel shiftMode={shiftMode} onPress={handleVirtualKey} />
      )}
    </div>
  );
}

The hook manages all state (text value, language, Shift mode, physical keyboard detection) — you're only responsible for rendering the field and panel wherever they belong in your layout.

Raw keymap data

import {
  PHYSICAL_KEYMAP,
  KEYBOARD_ROWS,
  CHAR_INFO,
  charForKey,
  hasShiftVariant,
  isHanifiChar,
  physicalKeyLookup,
} from "hanifi-rohingya-keyboard";

See the exported types (KeyDef, KeyId, Language, ShiftMode) for shapes.

License

MIT