react select search
1.0.0
Pertama-tama, saya ingin mengucapkan terima kasih atas dukungan luar biasa selama bertahun-tahun. Ini adalah salah satu proyek open source pertama saya dan juga proyek pertama saya yang sukses. Saya sangat bersyukur atas ke-33 semuanya! kontributor, tidak mungkin menjalankan proyek ini tanpa Anda.
Banyak hal yang terjadi tahun lalu. Saya memiliki anak laki-laki pertama saya, saya memiliki beberapa pekerjaan lepas yang memakan waktu dan beberapa startup yang berkembang. Ini membutuhkan waktu jauh dari open source dan saya merasa saya tidak dapat lagi melakukan keadilan pada komponen ini. Setidaknya tidak sendirian.
Saya masih percaya pada komponen pilihan yang kecil, super cepat, dan tanpa ketergantungan. Jika ada orang di luar sana yang ingin mempertahankan hal ini bersama saya, silakan hubungi kami untuk mendiskusikan langkah selanjutnya. Kirimi saya email di [email protected] atau hubungi saya di Twitter
Instal dengan npm ( npm i react-select-search ) atau benang ( yarn add react-select-search ) dan impor seperti biasa.
import SelectSearch from 'react-select-search' ;
/**
* The options array should contain objects.
* Required keys are "name" and "value" but you can have and use any number of key/value pairs.
*/
const options = [
{ name : 'Swedish' , value : 'sv' } ,
{ name : 'English' , value : 'en' } ,
{
type : 'group' ,
name : 'Group name' ,
items : [
{ name : 'Spanish' , value : 'es' } ,
]
} ,
] ;
/* Simple example */
< SelectSearch options = { options } value = "sv" name = "language" placeholder = "Choose your language" / >Untuk contoh lebih lanjut, Anda dapat melihat di direktori cerita.
Anda juga memerlukan beberapa CSS agar terlihat benar. Contoh tema dapat ditemukan di style.css. Anda juga dapat mengimpornya:
import 'react-select-search/style.css' Untuk digunakan dengan SSR Anda mungkin perlu menggunakan bundel commonjs (react-select-search/dist/cjs). Jika Anda ingin menggunakan tema contoh (style.css), Anda perlu memeriksa apakah skrip build Anda memanipulasi nama kelas, misalnya mengecilkannya. Jika demikian, Anda bisa menggunakan modul CSS untuk mendapatkan nama kelas dari file style.css dan menerapkannya menggunakan objek className. Contohnya bisa dilihat disini juga disini https://react-select-search.com/?path=/story/custom--css-modules.
Jika Anda menginginkan kontrol penuh (lebih dari sekadar penataan gaya dan perender khusus), Anda dapat menggunakan kait untuk meneruskan data ke komponen Anda sendiri dan membuatnya sendiri.
import React from 'react' ;
import { useSelect } from 'react-select-search' ;
const CustomSelect = ( { options , value , multiple , disabled } ) => {
const [ snapshot , valueProps , optionProps ] = useSelect ( {
options ,
value ,
multiple ,
disabled ,
} ) ;
return (
< div >
< button { ... valueProps } > { snapshot . displayValue } < / button >
{ snapshot . focus && (
< ul >
{ snapshot . options . map ( ( option ) => (
< li key = { option . value } >
< button { ... optionProps } value = { option . value } > { option . name } < / button >
< / li >
) ) }
< / ul >
) }
< / div >
) ;
} ; Di bawah ini adalah semua opsi yang tersedia yang dapat Anda teruskan ke komponen. Opsi tanpa default diperlukan.
| Nama | Jenis | Bawaan | Keterangan |
|---|---|---|---|
| pilihan | susunan | Lihat dokumentasi opsi di bawah | |
| dapatkan Opsi | fungsi | batal | Dapatkan opsi melalui panggilan fungsi, dapat mengembalikan janji untuk penggunaan asinkron. Lihat opsi dapatkan untuk mengetahui lebih lanjut. |
| opsi filter | susunan | batal | Serangkaian fungsi yang mengambil opsi terakhir yang difilter dan permintaan pencarian jika ada. Berjalan setelah getOptions. |
| nilai | tali, susunan | batal | Nilainya harus berupa array jika banyak mode. |
| banyak | boolean | PALSU | Setel ke true jika Anda ingin mengizinkan beberapa opsi yang dipilih. |
| mencari | boolean | PALSU | Setel ke true untuk mengaktifkan fungsi pencarian |
| dengan disabilitas | boolean | PALSU | Menonaktifkan semua fungsi |
| closeOnSelect | boolean | BENAR | Kotak pilih akan kabur secara default saat memilih opsi. Setel ini ke false untuk mencegah perilaku ini. |
| menghilangkan bouncing | nomor | 0 | Jumlah ms yang harus ditunggu hingga panggilan mendapatkan opsi saat mencari. |
| pengganti | rangkaian | string kosong | Ditampilkan jika tidak ada pilihan yang dipilih dan/atau ketika bidang pencarian difokuskan dengan nilai kosong. |
| pengenal | rangkaian | batal | ID HTML pada elemen tingkat atas. |
| pelengkapan otomatis | senar, hidup/mati | mati | Menonaktifkan/Mengaktifkan fungsionalitas pelengkapan otomatis di bidang pencarian. |
| fokus otomatis | boolean | PALSU | Fokus otomatis saat dipilih |
| nama kelas | tali, objek | pilih-kotak pencarian | Tetapkan string kelas dasar atau teruskan fungsi untuk kontrol penuh. Lihat nama kelas khusus untuk mengetahui lebih lanjut. |
| renderOption | fungsi | batal | Fungsi yang menampilkan opsi. Lihat perender khusus untuk mengetahui lebih lanjut. |
| renderGroupHeader | fungsi | batal | Fungsi yang merender header grup. Lihat perender khusus untuk mengetahui lebih lanjut. |
| nilai render | fungsi | batal | Fungsi yang merender bidang nilai/pencarian. Lihat perender khusus untuk mengetahui lebih lanjut. |
| pesan kosong | Bereaksi simpul | batal | Tetapkan pesan kosong untuk daftar opsi kosong, Anda dapat menyediakan fungsi render tanpa argumen sebagai ganti pesan string biasa |
| di Perubahan | fungsi | batal | Berfungsi untuk menerima dan menangani perubahan nilai. |
| pada Fokus | fungsi | batal | Panggilan balik fokus. |
| diBlur | fungsi | batal | Mengaburkan panggilan balik. |
Objek opsi dapat berisi properti dan nilai apa pun yang Anda suka. Satu-satunya yang diperlukan adalah name .
| Milik | Jenis | Keterangan | Diperlukan |
|---|---|---|---|
| nama | rangkaian | Nama opsi | Ya |
| nilai | rangkaian | Nilai opsi | Ya, jika tipenya bukan "grup" |
| jenis | rangkaian | Jika Anda menyetel tipe ke "grup", Anda dapat menambahkan serangkaian opsi yang akan dikelompokkan | TIDAK |
| item | susunan | Array objek opsi yang akan digunakan jika tipenya disetel ke "grup" | Ya, jika type disetel ke "grup" |
| dengan disabilitas | boolean | Setel ke true untuk menonaktifkan opsi ini | TIDAK |
Jika Anda menetapkan string sebagai nilai atribut className , komponen akan menggunakannya sebagai basis untuk semua elemen. Jika Anda ingin mengontrol sepenuhnya nama kelas, Anda bisa meneruskan objek dengan nama kelas. Kunci berikut ini ada:
Jika CSS tidak cukup, Anda juga dapat mengontrol HTML untuk berbagai bagian komponen.
| Panggilan balik | Argumen | Keterangan |
|---|---|---|
| renderOption | optionsProps: objek, optionData: objek, optionSnapshot: objek, className: string | Mengontrol rendering opsi. |
| renderGroupHeader | nama: tali | Mengontrol rendering nama header grup |
| nilai render | valueProps: objek, snapshot: objek, className: string | Mengontrol rendering elemen nilai/input |
optionProps dan valueProps diperlukan agar komponen yang Anda render dapat berfungsi. Misalnya:
< SelectSearch renderValue = { ( valueProps ) => < input { ... valueProps } / > } / >Monkeypatch jika perlu tetapi pastikan untuk tidak menghapus alat peraga penting.
OptionSnapshot adalah objek yang berisi status objek: { selected: bool, highlighted: bool } .
Anda dapat mengambil opsi secara asinkron dengan properti getOptions . Anda dapat mengembalikan opsi secara langsung atau melalui Promise .
function getOptions ( query ) {
return new Promise ( ( resolve , reject ) => {
fetch ( `https://www.thecocktaildb.com/api/json/v1/1/search.php?s= ${ query } ` )
. then ( response => response . json ( ) )
. then ( ( { drinks } ) => {
resolve ( drinks . map ( ( { idDrink , strDrink } ) => ( { value : idDrink , name : strDrink } ) ) )
} )
. catch ( reject ) ;
} ) ;
} Fungsi ini berjalan pada setiap pembaruan kueri penelusuran, jadi Anda mungkin ingin membatasi pengambilan. Jika Anda mengembalikan janji, kelas is-loading akan diterapkan ke elemen utama, memberi Anda kesempatan untuk mengubah tampilan, seperti menambahkan spinner. fetching properti juga tersedia di snapshot yang dikirim ke callback render Anda.
Dibuat dengan kontrib.rocks.
