itzsa

Documentation · itzsa

Nepali Input

React Input and Textarea that transliterate Latin keystrokes to Nepali Devanagari using Unicode or Preeti layouts. Drop-in fields with stable caret, controlled/uncontrolled support, and pure helpers.

@itzsa/nepali-inputUnicode · PreetiReact 18 / 19

Installation#

Add the package and optional styles. Use a Devanagari-capable font for correct glyphs.

pnpm add @itzsa/nepali-input

Global CSS (Tailwind v4):

@import "tailwindcss";
@source "../node_modules/@itzsa/nepali-input";
@import "@itzsa/nepali-input/styles.css";

:root {
  --itzsa-nepali-font: "Noto Sans Devanagari", sans-serif;
}

Peers

Peer deps: react and react-dom ^18 or ^19.

Getting started#

Controlled fields. onChange receives e.target.value already mapped to Nepali.

import { useState } from "react";
import { NepaliInput, NepaliTextarea } from "@itzsa/nepali-input";
import "@itzsa/nepali-input/styles.css";

export function NameForm() {
  const [name, setName] = useState("");
  const [bio, setBio] = useState("");

  return (
    <>
      <NepaliInput
        mode="unicode"
        placeholder="नाम"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <NepaliTextarea
        mode="preeti"
        value={bio}
        onChange={(e) => setBio(e.target.value)}
      />
    </>
  );
}

Examples#

Type Latin characters in the fields below — they convert as you type.

Unicode mode#

Traditional Unicode Nepali keyboard mapping (default).

value: —

Preeti mode#

Preeti layout — some keys expand to conjuncts (e.g. ! → ज्ञ).

Output: —

Enable / disable#

Toggle transliteration or switch layouts without remounting.

mode=unicode · enabled=true

toNepali helper#

Use the pure function outside React — forms, validation, server transforms.

toNepali → नामासते

import { toNepali } from "@itzsa/nepali-input";

toNepali("namaste", "unicode");
toNepali("s", "preeti"); // → क

Props API#

Native input/textarea props are forwarded. Package-specific props below.

NepaliInput#

Forwarded ref to HTMLInputElement.

NepaliInputProps

PropTypeDefaultDescription
mode'unicode' | 'preeti''unicode'Keyboard layout for Latin → Devanagari mapping.
enabledbooleantrueWhen false, behaves like a plain <input> (no transliteration).
value / defaultValuestring—Controlled or uncontrolled value (native).
onChange(e) => void—Fires with e.target.value already mapped to Nepali when enabled.
classNamestring—Merged with base field styles via tailwind-merge.
…restComponentProps<'input'>—All native input props are forwarded. Defaults: lang=ne, spellCheck=false, autoComplete=off.

NepaliTextarea#

Forwarded ref to HTMLTextAreaElement.

NepaliTextareaProps

PropTypeDefaultDescription
mode'unicode' | 'preeti''unicode'Keyboard layout for Latin → Devanagari mapping.
enabledbooleantrueWhen false, behaves like a plain <textarea>.
value / defaultValuestring—Controlled or uncontrolled value (native).
onChange(e) => void—Fires with mapped Nepali value when enabled.
classNamestring—Merged with base textarea styles.
…restComponentProps<'textarea'>—Native textarea props. Defaults: lang=ne, spellCheck=false.

Helpers & maps#

Also exported: unicodeMappings, preetiMappings, NEPALI_MAP_SIZE.

API

PropTypeDefaultDescription
toNepali(value, mode?)(string, mode?) => string—Transliterate a full string. Non-ASCII (existing Devanagari) is preserved.
mapChar(ch, mode?)(string, mode?) => string—Map a single character.
mapCaretIndex(value, caret, mode?)(string, number, mode?) => number—Caret index after mapping (used internally for cursor stability).
unicodeMappings / preetiMappingsreadonly string[]—Frozen lookup tables (index = charCode − 32).

Styling & fonts#

Base classes use shadcn-style tokens. Override with className.

<NepaliInput
  className="h-10 rounded-md border-border"
  mode="unicode"
/>

Font

Import styles.css and set --itzsa-nepali-font, or load Noto Sans Devanagari via next/font/google. Without a Devanagari font, some conjuncts may render poorly.

Caret & robustness

Multi-glyph Preeti keys keep the caret stable. Existing Devanagari is never re-mapped. Paste goes through the same path. Use enabled={false} for temporary Latin-only entry.