Romanian locations TypeScript helper for React
v1.0.0Added in 1.0.0
Romania's counties, cities and neighbourhoods with coordinates, diacritic-free search, distances and within-radius lists.
Type a place without diacritics ("iasi", "manastur", "sector 3"): cities, neighbourhoods and counties match with the typed part highlighted, larger places first. Tap a result to make it the centre, then drag the radius in the playground: the list below shows every city within that distance, nearest first, in km for the chosen locale.
Romanian locations is a Pro React helper in the React hooks and utilities category, written in TypeScript for React 19. It installs as source with npx wingo-ui@latest add ro-locations, together with Text match and Number format.
Add to a project
Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add ro-locationsRomanian locations is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans
Usage
Import searchLocations from @/lib/ro-locations.
import { citiesWithin, cityOptions, formatDistance, searchLocations } from "@/lib/ro-locations"
searchLocations("manastur")[0] // { type: "area", label: "Mănăștur", description: "Cluj-Napoca, Cluj", ... }
cityOptions("CJ").map((o) => o.label) // ["Cluj-Napoca", "Florești", "Turda"]
citiesWithin("cluj-napoca", 30).map(({ city, distance }) => `${city.name} · ${formatDistance(distance, "en-US")}`)
// ["Cluj-Napoca · 0 m", "Florești · 10 km", "Turda · 26 km"]API
radiusdefault30numberThe demo's citiesWithin(center, radiusKm) radius in km. The centre city itself is always first, at 0 km.
centerdefault"cluj-napoca"stringThe demo's centre: a city id from RO_CITIES (citiesWithin also takes any { lat, lng }).
limitdefault8numbersearchLocations options.limit: at most this many matches.
localedefault"en-US"stringformatDistance's locale: "4.2 km" in en-US, "4,2 km" in ro-RO. The demo also prints the straight-line distance to a second city with one decimal.
searchLocations(query: string, options?: { limit?: number; types?: ("city" | "area" | "county")[]; county?: string }) => LocationMatch[]Cities, areas and counties matching a query, ignoring case and diacritics (through text-match), best match first and larger places first among equals, with ranges to highlight. An empty query returns the largest cities (the "popular" suggestions of a location field).
Parts
RO_COUNTIES
constantThe 41 counties and Bucharest, alphabetical, with the plate code ("CJ", "B") and the seat ("Cluj-Napoca"). Type: readonly { code: string; name: string; seat: string }[].
RO_CITIES
constantEvery county seat and the large towns (52), largest first, with the city-centre coordinates, residents in thousands (2021 census, rounded, for ordering only) and the neighbourhoods or sectors people put in listings. Type: readonly { id: string; name: string; county: string; lat: number; lng: number; population: number; areas?: string[] }[].
getCounty
functionLookups by plate code (case-insensitive) and by city id (a slug: "targu-mures"). Signature: (code: string) => RoCounty | undefined.
getCity
functionLookups by plate code (case-insensitive) and by city id (a slug: "targu-mures"). Signature: (id: string) => RoCity | undefined.
citiesInCounty
functionLookups by plate code (case-insensitive) and by city id (a slug: "targu-mures"). Signature: (code: string) => RoCity[].
countyOptions
functionOptions for select, combobox and listbox: { value: "CJ", label: "Cluj", description: "Cluj-Napoca", keywords } and { value: "cluj-napoca", label: "Cluj-Napoca", description: "Cluj", keywords: its areas }, so "manastur" finds Cluj-Napoca in a combobox. Signature: () => LocationOption[].
cityOptions
functionOptions for select, combobox and listbox: { value: "CJ", label: "Cluj", description: "Cluj-Napoca", keywords } and { value: "cluj-napoca", label: "Cluj-Napoca", description: "Cluj", keywords: its areas }, so "manastur" finds Cluj-Napoca in a combobox. Signature: (county?: string) => LocationOption[].
distanceKm
functionGreat-circle distance (Cluj-Napoca to Florești ≈ 10 km), the cities inside a radius nearest first (a "+25 km" location filter), and "850 m" / "4.2 km" / "37 km". Signature: (a: GeoPoint, b: GeoPoint) => number.
citiesWithin
functionGreat-circle distance (Cluj-Napoca to Florești ≈ 10 km), the cities inside a radius nearest first (a "+25 km" location filter), and "850 m" / "4.2 km" / "37 km". Signature: (center: GeoPoint | string, radiusKm: number) => { city; distance }[].
formatDistance
functionGreat-circle distance (Cluj-Napoca to Florești ≈ 10 km), the cities inside a radius nearest first (a "+25 km" location filter), and "850 m" / "4.2 km" / "37 km". Signature: (km: number, locale?: string) => string.
Examples
County and city selects
countyOptions and cityOptions feed two dependent selects for a Romanian shipping address.
Delivery radius
citiesWithin lists the cities inside a radius of a warehouse, nearest first, with formatDistance for the labels.
Dependencies
Files
- lib/ro-locations.ts
FAQ
Is the Romanian locations helper free?
The preview, props and docs are free; copying the source needs a Pro plan. See plans.
How do I install Romanian locations?
Run npx wingo-ui@latest add ro-locations. It also adds the Wingo UI items it builds on (Text match and Number format). With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/ro-locations.
See also
Used in
More React hooks and utilities
Articles using this component
- Romanian Address Format: The Rules and a React Form
Build it: screens and apps10 min read