React Select + Custom Style

Library React Select adalah salah satu pilihan populer bagi pengembang untuk membuat komponen dropdown yang dapat disesuaikan. Dalam artikel ini, kita akan membahas bagaimana cara membuat gaya atau custom style pada React Select untuk menciptakan tampilan yang sesuai dengan tema dan desain UI aplikasi.

Mengapa Memilih React Select?
React Select memudahkan implementasi dropdown yang fleksibel dengan berbagai fitur seperti pencarian, seleksi multiple, dan opsi yang dapat disesuaikan. Namun, tampilan default mungkin tidak selalu sesuai dengan kebutuhan desain, sehingga kita perlu menambahkan custom styling agar dropdown menyatu dengan tampilan aplikasi.

Menggunakan React Select dalam Proyek
Untuk menggunakan React Select, instal terlebih dahulu dependensinya:

npm install react-select

Lalu, import ke dalam komponen dan buat dropdown dasar:

import Select from 'react-select';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

function MySelect() {
  return <Select options={options} />;
}

Custom Style

Custom Component React Select
buatlah 1 file baru, dan isi dengan script berikut

import Select from 'react-select'

const CustomSelectComponent = ({ onChange, options, value, placeholder }: any) => {

    const defaultValue = (options: any, value: any) => {
        return options ? options.find((option: any) => option.value === value) : ''
    }

    const customStyles = {
        option: (provided: any, state: { isSelected: any }) => ({
            ...provided,
            color: state.isSelected ? '#AB0202' : '#000000',
            background: state.isSelected ? '#F4F7F9' : '#FFFFFF',
            opacity: 1,
            '&:hover': {
                backgroundColor: '#FCC2C2',
                cursor: 'pointer',
            },
        }),
        menuPortal: (base: any) => ({ ...base, zIndex: 9999 }),
        control: (base: any, state: any) => ({
            ...base,
            background: '#F7F7F7',
            borderColor: '#C0C4D6',
            '&:hover': {
                borderColor: state.isFocused ? '#F7F7F7' : 'blue',
                cursor: 'pointer',
            },
        }),
        singleValue: (provided: any, state: { isDisabled: any }) => {
            const opacity = state.isDisabled ? 1 : 1
            const transition = 'opacity 300ms'

            return { ...provided, opacity, transition }
        },
    }

    return (
        <Select
            value={defaultValue(options, value)}
            onChange={(value) => onChange(value)}
            options={options}
            placeholder={placeholder}
            styles={customStyles}
            menuPortalTarget={document.body}
        />
    )
}

export default CustomSelectComponent

Fungsi dari masing masing props pada component di atas

• onChange adalah fungsi callback yang dijalankan setiap kali terjadi perubahan pada pilihan dropdown.

• options adalah array berisi objek-objek yang mewakili opsi yang tersedia di dropdown.

• value adalah nilai terpilih saat ini dari dropdown. Properti ini digunakan untuk mengatur opsi mana yang sedang dipilih dalam dropdown.

• placeholder adalah teks yang ditampilkan sebagai panduan pengguna sebelum ada opsi yang dipilih. Teks ini akan ditampilkan di dropdown sebagai petunjuk untuk memilih opsi.

2.Cara penggunaan CustomSelectComponent

berikut cara penggunaannya

import CustomSelectComponent from './SelectComponent'

const App = () => {

    const [value, setValue] = useState('')
    const options = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
    ];

    return (
        <>
            <CustomSelectComponent
                placeholder={'Category'}
                value={value}
                options={options}
                onChange={(value: any) => {
                    setValue(value.value)
                }}
            />
        </>)
}

export { App }