{"slug": "why-country-state-city-pickers-are-weirdly-hard", "title": "Why Country/State/City Pickers Are Weirdly Hard", "summary": "The article explains that implementing country, state, and city dropdown pickers is deceptively complex due to inconsistent data across regions (e.g., Singapore has no states, Turkey was renamed in 2022), API errors, and the need for search, caching, and keyboard navigation. After repeatedly rebuilding this feature, the author created the open-source npm package `react-country-state-city-picker`, which provides a ready-to-use React component with cascading logic, loading states, and headless hooks. The package is MIT licensed and available on GitHub, designed to be installed and used without further maintenance.", "body_md": "Every time I see this on a wireframe, I lie to myself.\n\n\"Yeah, that's easy.\"\n\nThree dropdowns. Country → State → City.\n\nThen three days disappear.\n\n## It starts innocent\n\nSelect a country, load states, select a state, load cities.\n\nThen: Singapore has no states. Some countries call them provinces. Some APIs return empty arrays. A handful aren't in the dataset at all depending on which source you're pulling from.\n\nProduct wants search because nobody scrolls 195 countries on mobile. Then keyboard nav. Loading states. Error handling for when the city call fails mid-form. Caching so you're not hammering the API on every keystroke.\n\nNone of it is hard. It just keeps accumulating. By the third project you're copy-pasting code from your last one and hoping nothing changed. By the fifth you're a little angry.\n\n## The data is the actual problem\n\nCountry and city names feel stable until you work with them. Turkey officially became Türkiye in 2022. Cities get renamed. The Philippines has over 1,600 municipalities and that number moves. Some datasets recognize Kosovo. Others don't.\n\nMost npm packages I tried were one of two things: a component sitting on a JSON file nobody had touched in two years, or solid current data with no UI layer at all.\n\nFive rebuilds in, I stopped pretending this was handled.\n\n## What I built\n\nI built `react-country-state-city-picker`\n\n.\n\nCascading logic, search, loading states, countries without states, keyboard nav, caching, dark/light mode. There's a single `<CountryStateCityPicker>`\n\nif you want the whole thing wired up, individual pickers if you only need one level, and headless hooks if you want your own UI. No dependencies outside React 18.\n\nI wasn't trying to build something clever. I wanted a picker I could install and not think about again.\n\n## Quick start\n\n```\nnpm install react-country-state-city-picker\njs\nimport { CountryStateCityPicker } from 'react-country-state-city-picker'\n\nfunction ShippingForm() {\n  return (\n    <CountryStateCityPicker\n      onCountryChange={(country) => console.log(country)}\n      onStateChange={(state) => console.log(state)}\n      onCityChange={(city) => console.log(city)}\n    />\n  )\n}\n```\n\nThat's the basic setup. Individual pickers and custom render props are there if you need them.\n\n## Try it\n\nMIT licensed, on GitHub: [react-country-state-city-picker](https://github.com/Shankulkarni/react-country-state-city-picker)\n\nIf you've rebuilt this before, you know what it's worth.\n\n*Originally published at shankulkarni.com*", "url": "https://wpnews.pro/news/why-country-state-city-pickers-are-weirdly-hard", "canonical_source": "https://dev.to/shan_kulkarni/why-countrystatecity-pickers-are-weirdly-hard-1ci1", "published_at": "2026-05-23 04:21:40+00:00", "updated_at": "2026-05-23 04:31:04.918029+00:00", "lang": "en", "topics": ["developer-tools", "open-source", "products"], "entities": ["react-country-state-city-picker", "CountryStateCityPicker", "Turkey", "Türkiye", "Philippines", "Kosovo", "Singapore"], "alternates": {"html": "https://wpnews.pro/news/why-country-state-city-pickers-are-weirdly-hard", "markdown": "https://wpnews.pro/news/why-country-state-city-pickers-are-weirdly-hard.md", "text": "https://wpnews.pro/news/why-country-state-city-pickers-are-weirdly-hard.txt", "jsonld": "https://wpnews.pro/news/why-country-state-city-pickers-are-weirdly-hard.jsonld"}}