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
onChangeadalah fungsi callback yang dijalankan setiap kali terjadi perubahan pada pilihan dropdown.optionsadalah array berisi objek-objek yang mewakili opsi yang tersedia di dropdown.valueadalah nilai terpilih saat ini dari dropdown. Properti ini digunakan untuk mengatur opsi mana yang sedang dipilih dalam dropdown.placeholderadalah 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 }
Top comments (0)