Bangladesh Geo Data
for Every JS/TS Framework

import { useState, useEffect } from 'react';
import { getDivisions, getDistricts } from 'bd-geo-info';

export function AddressSelector() {
  const [divisions, setDivisions] = useState([]);
  const [districts, setDistricts] = useState([]);
  const [divisionId, setDivisionId] = useState('');

  useEffect(() => { getDivisions('en').then(setDivisions); }, []);
  useEffect(() => {
    if (divisionId) getDistricts(divisionId, 'en').then(setDistricts);
    else setDistricts([]);
  }, [divisionId]);

  return (
    <select value={divisionId} onChange={e => setDivisionId(e.target.value)}>
      {divisions.map(d => <option key={d.value} value={d.value}>{d.label}</option>)}
    </select>
  );
}

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { getDivisions, getDistricts } from 'bd-geo-info';

const divisions = ref([]);
const districts = ref([]);
const selectedDivision = ref('');

onMounted(async () => { divisions.value = await getDivisions('en'); });

watch(selectedDivision, async (id) => {
  districts.value = id ? await getDistricts(id, 'en') : [];
});
</script>

<template>
  <select v-model="selectedDivision">
    <option v-for="d in divisions" :key="d.value" :value="d.value">{{ d.label }}</option>
  </select>
</template>

// geo.service.ts
import { Injectable } from '@angular/core';
import { from } from 'rxjs';
import { getDivisions, getDistricts, getUpazilas } from 'bd-geo-info';

@Injectable({ providedIn: 'root' })
export class GeoService {
  getDivisions(lang = 'en') { return from(getDivisions(lang)); }
  getDistricts(id: string, lang = 'en') { return from(getDistricts(id, lang)); }
  getUpazilas(id: string, lang = 'en') { return from(getUpazilas(id, lang)); }
}

<script lang="ts">
  import { onMount } from 'svelte';
  import { getDivisions, getDistricts } from 'bd-geo-info';

  let divisions = [], districts = [], divisionId = '';

  onMount(async () => { divisions = await getDivisions('en'); });

  async function onDivisionChange() {
    districts = divisionId ? await getDistricts(divisionId, 'en') : [];
  }
</script>

<select bind:value={divisionId} on:change={onDivisionChange}>
  {#each divisions as d}<option value={d.value}>{d.label}</option>{/each}
</select>

import { Injectable } from '@nestjs/common';
import { getDivisions, getDistricts, getUpazilas, getUnions } from 'bd-geo-info';

@Injectable()
export class GeoService {
  getDivisions(lang: 'en' | 'bn' = 'en') { return getDivisions(lang); }
  getDistricts(id: string, lang = 'en') { return getDistricts(id, lang); }
  getUpazilas(id: string, lang = 'en') { return getUpazilas(id, lang); }
  getUnions(id: string, lang = 'en') { return getUnions(id, lang); }
}

import express from 'express';
import { getDivisions, getDistricts, getUpazilas } from 'bd-geo-info';

const app = express();

app.get('/api/divisions', async (req, res) => {
  res.json(await getDivisions((req.query.lang ?? 'en') as 'en' | 'bn'));
});

app.get('/api/districts', async (req, res) => {
  const { divisionId, lang = 'en' } = req.query as any;
  res.json(await getDistricts(divisionId, lang));
});

app.listen(3000);