Documentation · itzsa

Nepali Unicode & Preeti Input — @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 below — Preview / Code toggle; copy from the upper right.

Unicode mode#

Traditional Unicode Nepali keyboard mapping (default).

नाम (Input)

टिप्पणी (Textarea)

value: —

Preeti mode#

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

Preeti layout

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 → नामासते

Props API#

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

NepaliInput#

Forwarded ref to HTMLInputElement.

NepaliInputProps

Prop	Type	Default	Description
mode	'unicode' \| 'preeti'	'unicode'	Keyboard layout for Latin → Devanagari mapping.
enabled	boolean	true	When false, behaves like a plain <input> (no transliteration).
value / defaultValue	string	-	Controlled or uncontrolled value (native).
onChange	(e) => void	-	Fires with e.target.value already mapped to Nepali when enabled.
className	string	-	Merged with base field styles via tailwind-merge.
…rest	ComponentProps<'input'>	-	All native input props are forwarded. Defaults: lang=ne, spellCheck=false, autoComplete=off.

NepaliTextarea#

Forwarded ref to HTMLTextAreaElement.

NepaliTextareaProps

Prop	Type	Default	Description
mode	'unicode' \| 'preeti'	'unicode'	Keyboard layout for Latin → Devanagari mapping.
enabled	boolean	true	When false, behaves like a plain <textarea>.
value / defaultValue	string	-	Controlled or uncontrolled value (native).
onChange	(e) => void	-	Fires with mapped Nepali value when enabled.
className	string	-	Merged with base textarea styles.
…rest	ComponentProps<'textarea'>	-	Native textarea props. Defaults: lang=ne, spellCheck=false.

Helpers & maps#

Also exported: unicodeMappings, preetiMappings, NEPALI_MAP_SIZE.

API

Prop	Type	Default	Description
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 / preetiMappings	readonly 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.