mm-nrc-select

mm-nrc-select 🇲🇲

Myanmar NRC (National Registration Card) select-option package for frontend. 428 townships · 14 states · Myanmar + English · Vanilla JS + React + Vue

Format: 12/KaMaYa(N)123456 / ၁၂/ကမရ(နိုင်)၁၂၃၄၅၆

Install

npm install mm-nrc-select
# or copy `src/` into your project (no dependencies)

Vanilla JS (any framework / plain HTML)

const { getStates, getTownships, getTypes, formatNrc, validateNrc, wireNrcSelects } = require('mm-nrc-select');

// 1. Fill selects
wireNrcSelects({
  stateSelect: document.getElementById('state'),
  townshipSelect: document.getElementById('township'),
  typeSelect: document.getElementById('type'),
  numberInput: document.getElementById('number'),
  outputEl: document.getElementById('output'),
  lang: 'both', // 'en' | 'mm' | 'both'
  onChange: (nrc, parts) => console.log(nrc, parts),
});

// 2. Helpers
getStates('en');          // [{ code:'12', name:'Yangon', ... }] — 14 items
getTownships('12', 'en'); // 45 Yangon townships: { codeEn:'KAMAYA', codeMm:'ကမရ', nameEn:'Kamaryut', nameMm:'ကမာရွတ်' }
getTypes('both');         // N/နိုင်, E/ဧည့်, P/ပြု, T/သာသနာ, R/ယာယီ, S/စ

formatNrc({ stateCode:'12', townshipCodeEn:'KAMAYA', typeEn:'N', number:'123456' }); // 12/KAMAYA(N)123456
validateNrc('12/KAMAYA(N)123456'); // true

See example/index.html — open it with a local server (npx serve .) for a working demo.

React

import { NrcSelect } from 'mm-nrc-select/src/react/NrcSelect.jsx';

function App() {
  return <NrcSelect lang="both" onChange={(nrc) => console.log(nrc)} />;
}
// lang: 'en' | 'mm' | 'both'
// NRC output is always EN format e.g. 12/KAMAYA(N)123456 (use formatNrc(..., 'mm') for Myanmar output)

See example/react-example.jsx.

Vue 3

<script setup>
import NrcSelect from 'mm-nrc-select/src/vue/NrcSelect.vue';
</script>
<template>
  <NrcSelect lang="both" @change="(nrc) => console.log(nrc)" />
</template>

API