# Romanian locations

> Romania's counties, cities and neighbourhoods with coordinates, diacritic-free search, distances and within-radius lists.

- Type: React helper (Hooks & Utilities)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add ro-locations`
- Docs: https://wingo-ui.com/components/ro-locations

## Interaction

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.

## Installation

```bash
npx wingo-ui@latest add ro-locations
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/ro-locations` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `lib/ro-locations.ts`

Wingo UI dependencies (installed automatically):

- [Text match](https://wingo-ui.com/components/text-match) ([Markdown](https://wingo-ui.com/components/text-match.md))
- [Number format](https://wingo-ui.com/components/number-format) ([Markdown](https://wingo-ui.com/components/number-format.md))

## Usage

```tsx
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

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `radius?` | `number` | `30` | The demo's citiesWithin(center, radiusKm) radius in km. The centre city itself is always first, at 0 km. |
| `center?` | `string` | `"cluj-napoca"` | The demo's centre: a city id from RO_CITIES (citiesWithin also takes any { lat, lng }). |
| `limit?` | `number` | `8` | searchLocations options.limit: at most this many matches. |
| `locale?` | `string` | `"en-US"` | formatDistance'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 (constant)

The 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 (constant)

Every 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 (function)

Lookups by plate code (case-insensitive) and by city id (a slug: "targu-mures"). Signature: (code: string) => RoCounty | undefined.

### getCity (function)

Lookups by plate code (case-insensitive) and by city id (a slug: "targu-mures"). Signature: (id: string) => RoCity | undefined.

### citiesInCounty (function)

Lookups by plate code (case-insensitive) and by city id (a slug: "targu-mures"). Signature: (code: string) => RoCity[].

### countyOptions (function)

Options 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 (function)

Options 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 (function)

Great-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 (function)

Great-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 (function)

Great-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.

## See also

- [Text match](https://wingo-ui.com/components/text-match) ([Markdown](https://wingo-ui.com/components/text-match.md))
- [Combobox](https://wingo-ui.com/components/combobox) ([Markdown](https://wingo-ui.com/components/combobox.md))
- [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md))

---

Canonical: https://wingo-ui.com/components/ro-locations
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt