React & Shadcn ile Arama Çubuğu ve Temizlenebilir Açılır Menü
Bu makalede, React ve Shadcn kütüphanesini kullanarak, arama özelliği içeren ve seçimi temizleme imkanı sunan bir açılır menü (dropdown) nasıl oluşturulacağını adım adım açıklayacağız. Öncelikle, Shadcn’in sunduğu stil ve bileşenler ile geliştirmenin kolaylığını göreceksiniz. Ardından, React’in gücünü kullanarak dinamik ve kullanıcı dostu bir arayüz oluşturacağız.
Gerekli Kütüphaneler
Başlamadan önce, projenize gerekli kütüphaneleri eklemeniz gerekiyor. Bunun için npm veya yarn kullanabilirsiniz:
npm install @shadcn/ui react-select
react-select kütüphanesi, gelişmiş bir açılır menü deneyimi sunmaktadır. Bu kütüphane, arama özelliğini ve temizleme fonksiyonunu kolayca entegre etmemizi sağlayacaktır. Ayrıca Shadcn’in stil ve bileşenleri ile uyumlu çalışır.
Arama Çubuğu ve Temizlenebilir Açılır Menü Bileşeni
Şimdi, ana bileşenimizi oluşturalım. Aşağıdaki kodda, react-select kullanarak arama ve temizleme fonksiyonelliğini ekledik. Shadcn’in Input ve Select bileşenleri ile kullanıcı arayüzünü daha şık ve modern hale getirdik.
import {Select, Input} from '@shadcn/ui'
import React, {useState} from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
function MyComponent() {
const [selectedOption, setSelectedOption] = useState(null);
return (
<div>
<Select options={options} value={selectedOption} onChange={setSelectedOption} />
</div>
);
}
export default MyComponent;
Bu kod parçasında, options dizisi açılır menüde gösterilecek seçenekleri tanımlar. selectedOption durumu, seçili olan seçeneği tutar. onChange fonksiyonu, kullanıcı bir seçenek seçtiğinde selectedOption durumunu günceller. Shadcn’in Select bileşeni, temizleme ve arama fonksiyonlarını otomatik olarak sağlar.
Stil Uygulamaları
İsteğe bağlı olarak, Shadcn’in sunduğu özelleştirme seçeneklerini kullanarak bileşenlerin stilini daha da özelleştirebilirsiniz. Dokümantasyonunda bu konuda detaylı bilgi bulabilirsiniz. Daha fazla özelleştirme için Shadcn’in dokümantasyonuna göz atabilirsiniz.
Sonuç
Bu makalede, React ve Shadcn kullanarak arama çubuğu içeren ve temizlenebilir bir açılır menü oluşturmayı öğrendik. Shadcn’in basit ve etkili bileşenleri ve react-select kütüphanesinin sağladığı fonksiyonlar ile geliştirmeyi hızlı ve verimli bir şekilde gerçekleştirebilirsiniz. Umarım bu makale size yardımcı olmuştur. Daha fazla React ve Shadcn ile ilgili içeriğe fatihsoysal.com adresinden ulaşabilirsiniz.
Ayrıca, konu ile ilgili daha fazla bilgi için aşağıdaki kaynaklara göz atabilirsiniz:
#Etiketler: React, Shadcn, Açılır Menü, Dropdown, Arama Çubuğu, Searchbar, Temizlenebilir, Clearable, React Select, Tutorial, Rehber, Örnek Kod