𝐍𝐏𝐌 P𝐚𝐜𝐤𝐚𝐠𝐞 𝐟𝐨𝐫 C𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥 S𝐞𝐥𝐞𝐜𝐭𝐢𝐨𝐧 𝐨𝐟 𝐂𝐨𝐮𝐧𝐭𝐫𝐲-𝐏𝐫𝐨𝐯𝐢𝐧𝐜𝐞-𝐃𝐢𝐬𝐭𝐫𝐢𝐜𝐭-𝐌𝐮𝐧𝐢𝐜𝐢𝐩𝐚𝐥𝐢𝐭𝐲/𝐕𝐃𝐂

6 min readApr 15, 2024

Greetings!

Hey developer, welcome! I know you’re seeking a perfect and easy-to-use NPM package for your project that provides a feature for conditional selection options based on Country-Province-District and Municipality/VDC. Right? Well, congratulations, you’re in the perfect place. After reading this blog, I’m sure you’ll love using this package as I have created this package by fully considering the flexibility, convenience, and ease of use.

Background!

During our minor project in our 3rd year, we created an EMIS software for our college and needed to implement a feature for conditional selection of country-province-district-Municipality/VDC. I spent an entire day searching for the best NPM package, hoping it would save my time. Unfortunately, I couldn’t find one and had to build the logic and feature from scratch, which took me over 2 days to make it function perfectly. After that experience, I wondered why there wasn’t an existing package that provided this feature, and why I shouldn’t create my own. Following the completion of my minor project and my 3rd year, I began developing this package, and now here I am.

Introduction!

You’re here, which means you’re likely a developer or a tech enthusiast with some understanding of NPM packages. However, for formality’s sake, let me give a short introduction to “NPM Package”.

Imagine a NPM package as a ready-made recipe for baking cookies. Instead of gathering all the ingredients and figuring out the steps yourself, you can use a recipe that someone else has created. Similarly, a NPM package provides developers with ready-to-use code for their projects, making coding easier.

Now that you know or have a basic understanding of what a NPM package is and how it simplifies coding.

So, what’s the use of this specific package, and how does it simplify coding?

Great question! If you’re a curious project digger or a software developer, you might encounter situations where you need to capture a user’s country and their complete address, including district/city and more. Until now, you might either enter the user’s entire address manually or create a select field without a comprehensive list. The problem with this approach is that if you enter one user from “Province 1” and another from “Koshi Province”, both logically belong to the same province. However, when visualizing data based on provinces, you might get unexpected results, which you don’t want.

To address this issue and provide a comprehensive list of provinces, districts, and Municipality/VDC with uniformity, I’ve created this NPM package. Unfortunately, as of now, I’ve only collected data for the country “Nepal”. However, I’ll cover other countries in the near future.

Now you understand why and how this package helps developers in creating their projects.

How do I use it, then?

For Installation, type:- npm i country-province-district-munvdc

OR
You can also visit npmjs.com website and search country-province-district-munvdc and follow the procedure.

OR
Follow this link.

After successfully installing the package, the first thing you need to do is check the package.json file. In the dependencies section, you should see “country-province-district-munvdc”: “^{version}”.

( You might have a different version than this one. )

Now you need to import the necessary components from this package.

import {
  CountryList,
  ProvinceList,
  DistrictList,
  MunVdcList
} from "country-province-district-munvdc";

You have the flexibility to import only CountryList, or a combination of CountryList and ProvinceList, or any other combination as per your requirements. However, the essential requirement is that you must import CountryList because as of now I’ve enabled options for Province, District, and Municipality/VDC only if you choose “Nepal” as the country. For other countries, currently, you can only select the country with the other fields disabled.

Now, Inside your main component, type these code snippets.

const [selectedCountry, setSelectedCountry] = useState<string>("");
const [selectedProvince, setSelectedProvince] = useState<string>("");
const [selectedDistrict, setSelectedDistrict] = useState<string>("");
const [selectedMunVdc, setSelectedMunVdc] = useState<string>("");

const [selectedProvinceId, setSelectedProvinceId] = useState<number>(0);

const [selectedDistrictId, setSelectedDistrictId] = useState<number>(0);

The state variables themselves reflect their use cases, but let me also explain them briefly. selectedCountry, selectedProvince, selectedDistrict, and selectedMunVdc are used to receive the values of the selected Country, Province, District, and Municipality/VDC chosen by the user. You can log these values through these state variables. selectedProvinceId is used to send the Province ID to fetch a particular district list based on the province ID, while selectedDistrictId is used to send the District ID to fetch a specific Municipality/VDC list based on the district ID received.

After this, you have to create one function whose task is to console log the selected value.

  const handleSubmit = (selectedCountry: string, selectedProvince:string, selectedDistrict:string, selectedMunVdc:string) => {
    console.log({ 
      country: selectedCountry,
      province: selectedProvince,
      district: selectedDistrict,
      munvdc: selectedMunVdc
     });
  };

This function receives four parameters for this case as I have imported all the four components and it console log the value in key-value pair.

After that, put these code snippets inside the return ( <> … </> ) section.

<CountryList 
   onCountrySelect={setSelectedCountry} 
/>

<ProvinceList
   selectedCountry={selectedCountry}
   setSelectedProvinceId={setSelectedProvinceId}
   onProvinceSelect={setSelectedProvince}
/>

<DistrictList
   selectedProvinceId={selectedProvinceId}
   setSelectedDistrictId={setSelectedDistrictId}
   onDistrictSelect={setSelectedDistrict}
/>

<MunVdcList
   selectedDistrictId={selectedDistrictId}
   selectedProvinceId={selectedProvinceId}
   onMunVdcSelect={setSelectedMunVdc}
/>

Lastly, you need to create a button that is used to send the selected value in the backend (console in this case).

<button type="submit" onClick={() => handleSubmit(selectedCountry, selectedProvince, selectedDistrict, selectedMunVdc)}>
  Submit
</button>

And yes, you’ve successfully implemented the conditional selection functionality in your project. Congratulations!

Here’s complete code for implementing this feature.

"use client";
import React, { useState } from "react";
import {
  CountryList,
  ProvinceList,
  DistrictList,
  MunVdcList
} from "country-province-district-munvdc";

const ConditionalSelect= () => {
  const [selectedCountry, setSelectedCountry] = useState<string>("");
  const [selectedProvince, setSelectedProvince] = useState<string>("");
  const [selectedDistrict, setSelectedDistrict] = useState<string>("");
  const [selectedMunVdc, setSelectedMunVdc] = useState<string>("");

  const [selectedProvinceId, setSelectedProvinceId] = useState<number>(0);

  const [selectedDistrictId, setSelectedDistrictId] = useState<number>(0);

  const handleSubmit = (selectedCountry: string, selectedProvince:string, selectedDistrict:string, selectedMunVdc:string) => {
    console.log({ 
      country: selectedCountry,
      province: selectedProvince,
      district: selectedDistrict,
      munvdc: selectedMunVdc
     });
  };

  return (
    <>
      <CountryList onCountrySelect={setSelectedCountry} />

      <ProvinceList
        selectedCountry={selectedCountry}
        setSelectedProvinceId={setSelectedProvinceId}
        onProvinceSelect={setSelectedProvince}
      />

      <DistrictList
        selectedProvinceId={selectedProvinceId}
        setSelectedDistrictId={setSelectedDistrictId}
        onDistrictSelect={setSelectedDistrict}
      />

      <MunVdcList
        selectedDistrictId={selectedDistrictId}
        selectedProvinceId={selectedProvinceId}
        onMunVdcSelect={setSelectedMunVdc}
      />

      <button type="submit" onClick={() => handleSubmit(selectedCountry, selectedProvince, selectedDistrict, selectedMunVdc)}>
        Submit
      </button>
    </>
  );
};

export default ConditionalSelect;

Let me also provide a bit more clarity on the feature for cases where you only want to implement country and province.

Here’s the code snippets for this case.

"use client";
import React, { useState } from "react";
import {
  CountryList,
  ProvinceList
} from "country-province-district-munvdc";

const ConditionalSelect= () => {
  const [selectedCountry, setSelectedCountry] = useState<string>("");
  const [selectedProvince, setSelectedProvince] = useState<string>("");

  const [selectedProvinceId, setSelectedProvinceId] = useState<number>(0);

  const handleSubmit = (selectedCountry: string, selectedProvince:string) => {
    console.log({ 
      country: selectedCountry,
      province: selectedProvince
     });
  };

  return (
    <>
      <CountryList onCountrySelect={setSelectedCountry} />

      <ProvinceList
        selectedCountry={selectedCountry}
        setSelectedProvinceId={setSelectedProvinceId}
        onProvinceSelect={setSelectedProvince}
      />

      <button type="submit" onClick={() => handleSubmit(selectedCountry, selectedProvince)}>
        Submit
      </button>
    </>
  );
};

export default ConditionalSelect;