Hidupkan dropdown Anda yang membosankan dengan perpustakaan React yang fleksibel ini.

Input pilihan adalah komponen aplikasi web berguna yang memungkinkan Anda memilih nilai dari banyak opsi tanpa menghabiskan banyak ruang. Namun gaya defaultnya bisa membosankan dan berbenturan dengan desain Anda yang lain.

React Select memberikan solusi yang fleksibel dan dapat disesuaikan untuk meningkatkan tampilan dan fungsionalitas input dropdown.

Menginstal React Select

Mengintegrasikan React dengan perpustakaan atau teknologi lain, seperti React Select, React Redux, dan masih banyak lagi, dapat menyederhanakan proses pengembangan.

Untuk memulai React Select, Anda perlu menginstalnya di proyek Anda. Ke lakukan ini menggunakan npm, jalankan perintah terminal ini di direktori proyek Anda:

npm i --save react-select

Ini akan menginstal dan menyiapkan perpustakaan di proyek React Anda, sehingga Anda dapat mulai menggunakannya.

Membuat Input Pilihan Dengan React Select

Sekarang setelah Anda menyiapkan perpustakaan, Anda dapat menggunakannya untuk membuat input pilihan. Untuk melakukan ini, Anda akan menggunakan

instagram viewer
Pilih komponen. Ini adalah komponen yang sangat dapat disesuaikan yang memungkinkan pengguna memilih opsi dari daftar.

Berikut ini contoh cara menggunakan komponen Select:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


return (





 </div>
 )
}
exportdefault App

Contoh ini dimulai dengan mengimpor Pilih komponen dari “reaksi-pilih”. Ini mendefinisikan sebuah pilihan array dengan tiga objek, masing-masing dengan a nilai dan sebuah label Properti. Properti value mewakili nilai yang akan dikirimkan formulir ke backend saat Anda mengirimkannya. Properti label adalah teks yang akan ditampilkan oleh komponen Select di dropdown.

Saat Anda merender komponen Select, teruskan array opsi ke komponen tersebut menggunakan pilihan menopang.

Dengan blok kode ini, perpustakaan React Select akan menghasilkan dropdown seperti ini:

Menyesuaikan Input Pilihan

React Select menyediakan berbagai cara untuk menyesuaikan input yang dipilih. Anda dapat menggunakan kelas CSS atau menerapkan gaya sebaris langsung ke input yang dipilih, sesuai preferensi Anda.

Menyesuaikan Dengan Kelas CSS

Pustaka React Select menyediakan a nama kelas penyangga untuk Pilih komponen. Gunakan prop className ini untuk menerapkan Cascading Style Sheet (CSS) khusus gaya ke komponen Pilih Anda.

Misalnya:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


return (






exportdefault App

Blok kode di atas mirip dengan yang sebelumnya, tetapi menggunakan nama kelas prop untuk menerapkan kelas CSS khusus ke Pilih komponen. Berikan nama di prop className dan Anda dapat menggunakannya untuk menerapkan gaya CSS ke komponen:

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

Setelah menentukan gaya, masukan pilihan Anda akan terlihat seperti ini:

Menyesuaikan Dengan Gaya Inline

Anda juga dapat menentukan gaya sebaris pada objek yang Anda lewati gaya penyangga dari Pilih komponen. Ini memberi Anda kontrol lebih besar atas gaya elemen individual.

Berikut ini contohnya:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


const customStyles = {
 control: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#e2e2e2",
 }),
 option: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: state.isFocused? "#e2e2e2": "",
 color: state.isFocused? "#333333": "#FFFFFF",
 }),
 menu: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#333333",
 }),
 }


return (





 </div>
 )
}
exportdefault App

Objek penyangga, gaya khusus, berisi properti gaya untuk komponen Select kontrol, pilihan, Dan menu bagian. Properti ini adalah fungsi yang menggunakan dua argumen: gaya dasar Dan negara.

Parameter baseStyles mewakili gaya default yang disediakan oleh React Select, sedangkan parameter status mewakili status elemen saat ini. Dalam contoh ini, fungsi menggunakan operator spread untuk menggabungkan baseStyles dengan gaya tambahan untuk setiap bagian komponen.

Setelah menerapkan gaya ini, masukan pilihan Anda akan terlihat seperti ini:

Menambahkan Fungsionalitas ke Input Pilihan

React Select menyediakan beberapa fitur untuk meningkatkan fungsionalitas input pilihan. Anda dapat mengaktifkan fungsionalitas multi-pilih dan pencarian, dan bahkan membuat komponen dropdown khusus.

Fungsi Multi-Pilih

Untuk mengaktifkan fungsionalitas multi-pilihan di dropdown Anda, teruskan adalah Multi prop ke komponen Select. Ini memungkinkan pengguna memilih beberapa opsi dari menu dropdown.

Misalnya:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]


return (





 </div>
 )
}
exportdefault App

Contoh ini menunjukkan cara menggunakan adalah Multi prop untuk menambahkan fungsionalitas multi-pilihan ke input pilihan Anda.

Fungsi Pencarian

Pustaka React Select menyediakan fungsionalitas pencarian bawaan untuk memfilter opsi dengan mudah. Secara default, komponen Select menampilkan input pencarian saat Anda membuka dropdown. Pengguna dapat mengetikkan input pencarian untuk memfilter opsi yang tersedia.

Untuk mengaktifkan fungsionalitas pencarian, teruskan dapat dicari menopang ke Pilih komponen. Seperti adalah Multi prop, isSearchable menerima nilai boolean.

Berikut ini contoh cara menggunakan prop isSearchable untuk mengaktifkan fungsi pencarian:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]


return (





 </div>
 )
}
exportdefault App

Merender blok kode di atas akan menampilkan input pilihan dengan fungsi pencarian. Ini akan terlihat dan berfungsi seperti ini:

Buat Komponen Dropdown Khusus

React Select memungkinkan Anda membuat komponen dropdown khusus menggunakan prop komponen. Anda dapat mengganti komponen default yang disediakan oleh React Select dan menyesuaikan tampilan dan perilaku dropdown sesuai selera Anda.

Misalnya:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (




{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )



const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )


const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]


const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }


return<Selectoptions={options}components={customComponents} />
}
exportdefault App

Blok kode ini menunjukkan cara membuat komponen khusus untuk input pilihan menggunakan komponen penyangga dari Pilih komponen. Itu mengimpor komponen objek yang merupakan kumpulan komponen yang telah ditentukan sebelumnya yang dapat Anda gunakan untuk menyesuaikan tampilan dan perilaku berbagai elemen dalam input pilihan Anda.

Kode ini mendefinisikan dua komponen fungsional: Opsi Kustom Dan Indikator Dropdown Khusus. Komponen CustomOption mengambil objek sebagai parameter. Objek ini berisi berbagai properti yang disediakan oleh React Select, seperti alat peraga bagian dalam Dan label.

Komponen CustomDropdownIndicator mengambil Atribut sebagai parameter. Komponen ini menampilkan indikator dropdown khusus dengan simbol panah ke bawah. Kode menciptakan a komponen khusus objek yang memetakan komponen CustomOption dan CustomDropdownIndicator ke komponen yang sesuai Pilihan Dan Indikator Dropdown kunci.

Terakhir, kode ini meneruskan objek customComponents ke prop komponen dari komponen Select. Ini akan membuat input pilihan dengan komponen khusus, terlihat seperti ini:

Komponen Standar Bisa Lebih Bertenaga dan Menarik

React Select adalah perpustakaan canggih yang memungkinkan Anda membuat input pilihan yang cantik dan bergaya di React. Anda dapat menyesuaikan input yang dipilih, menambahkan fungsionalitas ke dalamnya, dan membuat komponen dropdown khusus. Memanfaatkan perpustakaan ini, Anda dapat meningkatkan tampilan dan pengalaman pengguna aplikasi React Anda.