@affandra-solusi-teknologi/tumpaksewu
v1.1.0
Published
A package that makes it easy to create cascading dropdowns in nextjs.
Downloads
5
Maintainers
Readme
tumpaksewu
A package that makes it easy to create cascading dropdowns in nextjs.
Example
import Select from '@affandra-solusi-teknologi/tumpaksewu'
import { useState } from 'react'
export default function Home() {
let [country, setCountry] = useState([]);
let [province, setProvince] = useState([]);
let [city, setCity] = useState([]);
let data = {
country: [
{ id: 1, name: 'Indonesia' },
{ id: 2, name: 'Malaysia' },
],
province: [
{ id: 1, name: "Jawa Barat", country: 1 },
{ id: 2, name: "Jawa Tengah", country: 1 },
{ id: 3, name: "Sabah", country: 2 },
{ id: 4, name: "Serawak", country: 2 },
],
city: [
{ id: 1, name: "Bandung", province: 1 },
{ id: 2, name: "Cirebon", province: 1 },
{ id: 3, name: "Purwokerto", province: 2 },
{ id: 4, name: "Semarang", province: 2 },
{ id: 5, name: "Kudat", province: 3 },
{ id: 6, name: "Papar", province: 3 },
{ id: 7, name: "Bintulu", province: 4 },
{ id: 8, name: "Matu", province: 4 },
]
}
return (
<>
<Select data={data} first={true} current="country" next="province" currentState={[country, setCountry]} nextState={[province, setProvince]}>
<option selected disabled>Pilih negara</option>
{country.map((x, idx) => {
return <option key={idx} value={x.id}>{x.name}</option>
})}
</Select>
<Select data={data} current="province" next="city" currentState={[province, setProvince]} nextState={[city, setCity]}>
<option selected disabled>Pilih provinsi</option>
{province.map((x, idx) => {
return <option key={idx} value={x.id}>{x.name}</option>
})}
</Select>
<Select data={data} current="city" currentState={[city, setCity]}>
<option selected disabled>Pilih kota</option>
{city.map((x, idx) => {
return <option key={idx} value={x.id}>{x.name}</option>
})}
</Select>
</>
)
}