Implementasi React Select di React - STK Blogs

Implementasi React Select di React 

Hallo semua kali ini saya akan berbagi artikel tentang cara implementasi react select pada react, React select biasanya digunakan untuk membuat option data yang berbentuk pilihan seperti membuat pilihan provinsi, kota, negara, kategori, dll.

Mengapa Harus React Select ?

Menurut saya react select selain mudah digunakan banyak juga beberapa kompenen yang sudah disediakan yang mana komponen tersebut bisa memudahkan kita dalam mengcustom option pilihan yang kita mau, dan selain itu react select ini bisa dikasih animasi yang membuat tampilan kita lebih menarik.

Dibawah ini ada beberapa langkah untuk mengimplementasikan react select pada react.

Installasi Library React Select

Untuk langkah pertama kita install library react select kedepedency react, untuk installasi cukup buka terminal dan masuk kedalam project react kita lalu masukkan perintah dibawah ini.

yarn add react-select

OR

npm i --save react-select

Import Library & Implementasi React Select

Untuk langkah kedua setelah kita selesai melakukan installasi silahkan import library react select dan membuat komponen react select, Untuk membuat komponen react select disini saya sudah memberikan contoh untuk pembuatan komponen react select dan kalian bisa mencobanya.

Source Code:

import React from 'react';
import Select from 'react-select';

const data = [
    {value: "purple", label: "Purple"},
    {value: "red", label: "Red"},
    {value: "orange", label: "Orange"},
    {value: "yellow", label: "Yellow"},
    {value: "green", label: "Green"},
    {value: "forest", label: "Forest"},
    {value: "slate", label: "Slate"},
    {value: "silver", label: "Silver"},
]
 
const MyComponent = () => {
    return (
        <Select options={options} />
    )
}

export default MyComponent;

Untuk hasilnya seperti dibawah ini:

Nah itulah cara implementasi react select pada react, Semoga bisa membantu anda dan bermanfaat untuk anda, Untuk lebih luasnya dalam mempelajari react select kalian bisa membaca documentasinya yang saya taruh dibawah ini:

Sumber Informasi : React Select (https://react-select.com/)