UI kütüphaneleri

Prop getter'lar düz bir select'i tek satırda doldurur ve disabled durumunu zincirden hesaplar; shadcn/ui, Ant Design ve kendi bileşeniniz için ayrı biçimler sunar.

Prop getter'lar

getProvinceProps(), getDistrictProps() ve getNeighbourhoodProps() düz bir <select>'i tek satırda doldurur:

const {
  getProvinceProps,
  getDistrictProps,
  getNeighbourhoodProps,
  getPostalCodeProps,
} = useViraAddress()
 
<select {...getProvinceProps()} />
<select {...getDistrictProps()} />
<select {...getNeighbourhoodProps()} />
<input {...getPostalCodeProps()} />

Seçenekler sizin yerinize çizilir; boş ilk seçenek placeholder'dır ve seviyeyi tekrar temizlemeye yarar. Getter'lar ayrıca value, onChange, disabled, aria-busy, name ve id verir. Gizli posta kodu input'u, değeri kütüphanesiz bir form gönderimine taşır.

disabled zincirden gelir: ilçe, il seçilene kadar; mahalle, ilçe seçilene ve mahalleler yüklenene kadar kapalıdır. Her değeri seçenekle ya da prop'u sonradan yazarak ezebilirsiniz:

<select {...getDistrictProps({ placeholder: "Nerede?" })} />
<select {...getDistrictProps()} disabled={false} />
<select {...getProvinceProps({ name: "sehir", id: "sehir" })} />

Başka bir bileşen kullanıyorsanız biçimi as ile seçin: headless, shadcn veya antd.

headless

Kendi select bileşeniniz için: options listesi artı onChange(value).

<MySelect {...getProvinceProps({ as: "headless" })} />
<MySelect {...getDistrictProps({ as: "headless" })} />
<MySelect {...getNeighbourhoodProps({ as: "headless" })} />

Prop	Değer
`options`	`{ value, label }` listesi
`value`	Seçili değer; seçim yoksa `""`
`onChange`	Çıplak bir değer ya da change event'i alır
`disabled`	Zincirden hesaplanır
`loading, aria-busy`	Mahalle seviyesinde, mahalleler yüklenirken `true`
`name, id`	`names` seçeneğinden ya da seviye adından; `id` `useId` ile üretilir
`placeholder`	`"İl seçiniz"`, `"İlçe seçiniz"`, `"Mahalle seçiniz"`

shadcn/ui

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
 
const { provinces, getProvinceProps } = useViraAddress()
 
<Select {...getProvinceProps({ as: "shadcn" })} items={provinces}>
  <SelectTrigger>
    <SelectValue placeholder="İl seçiniz" />
  </SelectTrigger>
  <SelectContent>
    {provinces.map((p) => (
      <SelectItem key={p.value} value={p.value}>
        {p.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

shadcn/ui için value, onValueChange ve disabled Select'e gider; öğeler sizdedir. Değer boşken SelectValue placeholder'ı gösterir. items, shadcn/ui'ın Base UI sürümünde seçili etiketin görünmesi için gerekir; Radix sürümünde zararsızdır.

Ant Design

import { Select } from "antd"
 
<Select {...getProvinceProps({ as: "antd" })} />
<Select {...getDistrictProps({ as: "antd" })} />
<Select {...getNeighbourhoodProps({ as: "antd" })} />

Ant Design için options, loading ve arama hazır gelir. Kütüphanenin kendi filtresi İ harfini i̇ yaptığı için istanbul araması İstanbul'u bulamaz; bu biçim Türkçe farkında bir filterOption verir. Değer boşken undefined gönderilir, böylece placeholder görünür.

Listeler ve setter'lar

Bileşeninizin prop'ları hiçbir biçime uymuyorsa listeleri ve setter'ları doğrudan kullanın. MUI Autocomplete:

import Autocomplete from "@mui/material/Autocomplete"
import TextField from "@mui/material/TextField"
 
const { provinces, setProvince, value } = useViraAddress()
 
<Autocomplete
  options={provinces}
  value={provinces.find((p) => p.value === value.provinceCode) ?? null}
  onChange={(_, option) => setProvince(option?.value ?? null)}
  renderInput={(params) => <TextField {...params} label="İl" />}
/>

Kendi aramanızı yazıyorsanız toSearchKey harf ve Türkçe karakter farkını yok sayar:

import { toSearchKey } from "@virastack/address"
 
// "kadikoy" araması "Kadıköy"ü bulur
const hits = neighbourhoods.filter((n) =>
  toSearchKey(n.label).includes(toSearchKey(query)),
)

Uzun listeler

Bir ilçe birkaç yüz mahalle ve köy tutabilir; en kalabalığı Artvin'in Yusufeli ilçesidir (674). Bu seviyede aranabilir bir select kullanın; listeniz binlerce satır çizecekse sanallaştırın.