The NRC Form library is a React component that provides an input form for Myanmar National Registration Card (NRC) numbers. The component allows users to select the NRC code, place, type, and enter the NRC number in a standardized format.
Thanks for this nrc data repository https://github.com/htetoozin/Myanmar-NRC/blob/master/nrc.json
I used this data to make my nrc package.
To use the NRC Form library, follow these steps:
- Install the library via npm:
- Import the library in your React component:
- Use the component in your JSX:
npm install react-mm-nrc-form
import NRCForm from "react-mm-nrc-form";
<NRCForm />
The NRC Form component accepts the following props:
Prop Name | Data Type | Description | Default Value |
---|---|---|---|
NRCCodeSelect | number | The currently selected NRC code | 1 |
setNRCCodeSelect | function | A callback function to update the selected NRC code | null |
NRCPlaceSelect | string | The currently selected NRC place | null |
setNRCPlaceSelect | function | A callback function to update the selected NRC place | null |
NRCTypeSelect | string | The currently selected NRC type | null |
setNRCTypeSelect | function | A callback function to update the selected NRC type | null |
NRCCode | string | The NRC number entered by the user | null |
setNRCCode | function | A callback function to update the NRC number entered by the user | null |
language | string | The language in which to display the NRC code, place, and type options ("en" for English, "mm" for Myanmar and "all" for both | All |
Here is an example of using the NRCForm component with default props:
import React from "react";
import NRCForm from "myanmar-nrc-format";
const App = () => {
const [NRCCodeSelect, setNRCCodeSelect] = useState();
const [NRCPlaceSelect, setNRCPlaceSelect] = useState();
const [NRCTypeSelect, setNRCTypeSelect] = useState();
const [NRCCode, setNRCCode] = useState();
return (
<div className="App">
<NRCForm
NRCCodeSelect={NRCCodeSelect}
setNRCCodeSelect={setNRCCodeSelect}
NRCPlaceSelect={NRCPlaceSelect}
setNRCPlaceSelect={setNRCPlaceSelect}
NRCTypeSelect={NRCTypeSelect}
setNRCTypeSelect={setNRCTypeSelect}
NRCCode={NRCCode}
setNRCCode={setNRCCode}
language={"mm"}
/>
</div>
);
};
The NRCForm component provided by this npm library can be used to input and validate Myanmar National Registration Card (NRC) numbers in a React project. It can be customized with various props to suit different needs.