{"id":12685,"date":"2025-02-17T02:00:12","date_gmt":"2025-02-16T23:00:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-shadcn-ile-arama-cubugu-ve-temizlenebilir-acilir-menu\/"},"modified":"2025-02-17T02:00:12","modified_gmt":"2025-02-16T23:00:12","slug":"react-shadcn-ile-arama-cubugu-ve-temizlenebilir-acilir-menu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-shadcn-ile-arama-cubugu-ve-temizlenebilir-acilir-menu\/","title":{"rendered":"React & Shadcn ile Arama \u00c7ubu\u011fu ve Temizlenebilir A\u00e7\u0131l\u0131r Men\u00fc"},"content":{"rendered":"

<\/p>\n

React & Shadcn ile Arama \u00c7ubu\u011fu ve Temizlenebilir A\u00e7\u0131l\u0131r Men\u00fc<\/p>\n

Bu makalede, React ve Shadcn k\u00fct\u00fcphanesini kullanarak, arama \u00f6zelli\u011fi i\u00e7eren ve se\u00e7imi temizleme imkan\u0131 sunan bir a\u00e7\u0131l\u0131r men\u00fc (dropdown) nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z. \u00d6ncelikle, Shadcn’in sundu\u011fu stil ve bile\u015fenler ile geli\u015ftirmenin kolayl\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. Ard\u0131ndan, React’in g\u00fcc\u00fcn\u00fc kullanarak dinamik ve kullan\u0131c\u0131 dostu bir aray\u00fcz olu\u015fturaca\u011f\u0131z.<\/p>\n

Gerekli K\u00fct\u00fcphaneler<\/h2>\n

Ba\u015flamadan \u00f6nce, projenize gerekli k\u00fct\u00fcphaneleri eklemeniz gerekiyor. Bunun i\u00e7in npm veya yarn kullanabilirsiniz:<\/p>\n

\nnpm install @shadcn\/ui react-select\n<\/code><\/pre>\n
 react-select k\u00fct\u00fcphanesi, geli\u015fmi\u015f bir a\u00e7\u0131l\u0131r men\u00fc deneyimi sunmaktad\u0131r.  Bu k\u00fct\u00fcphane, arama \u00f6zelli\u011fini ve temizleme fonksiyonunu kolayca entegre etmemizi sa\u011flayacakt\u0131r.  Ayr\u0131ca Shadcn’in stil ve bile\u015fenleri ile uyumlu \u00e7al\u0131\u015f\u0131r.<\/p>\n
Arama \u00c7ubu\u011fu ve Temizlenebilir A\u00e7\u0131l\u0131r Men\u00fc Bile\u015feni<\/h2>\n
\u015eimdi,  ana bile\u015fenimizi olu\u015ftural\u0131m.  A\u015fa\u011f\u0131daki kodda,  react-select kullanarak arama ve temizleme fonksiyonelli\u011fini ekledik.  Shadcn’in  Input ve Select bile\u015fenleri ile kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc daha \u015f\u0131k ve modern hale getirdik.<\/p>\n
\nimport {Select, Input} from '@shadcn\/ui'\nimport React, {useState} from 'react';\nimport Select from 'react-select';\n\n\nconst options = [\n  { value: 'chocolate', label: 'Chocolate' },\n  { value: 'strawberry', label: 'Strawberry' },\n  { value: 'vanilla', label: 'Vanilla' }\n];\n\nfunction MyComponent() {\n  const [selectedOption, setSelectedOption] = useState(null);\n\n  return (\n    <div>\n      <Select options={options} value={selectedOption} onChange={setSelectedOption} \/>\n    <\/div>\n  );\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n
Bu kod par\u00e7as\u0131nda, options dizisi a\u00e7\u0131l\u0131r men\u00fcde g\u00f6sterilecek se\u00e7enekleri tan\u0131mlar.  selectedOption durumu, se\u00e7ili olan se\u00e7ene\u011fi tutar.  onChange fonksiyonu, kullan\u0131c\u0131 bir se\u00e7enek se\u00e7ti\u011finde selectedOption durumunu g\u00fcnceller.  Shadcn’in Select bile\u015feni,  temizleme ve arama fonksiyonlar\u0131n\u0131 otomatik olarak sa\u011flar.<\/p>\n
Stil Uygulamalar\u0131<\/h2>\n
\u0130ste\u011fe ba\u011fl\u0131 olarak, Shadcn’in sundu\u011fu \u00f6zelle\u015ftirme se\u00e7eneklerini kullanarak bile\u015fenlerin stilini daha da \u00f6zelle\u015ftirebilirsiniz.  Dok\u00fcmantasyonunda bu konuda detayl\u0131 bilgi bulabilirsiniz. Daha fazla \u00f6zelle\u015ftirme i\u00e7in Shadcn’in dok\u00fcmantasyonuna g\u00f6z atabilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu makalede,  React ve Shadcn kullanarak arama \u00e7ubu\u011fu i\u00e7eren ve temizlenebilir bir a\u00e7\u0131l\u0131r men\u00fc olu\u015fturmay\u0131 \u00f6\u011frendik.  Shadcn’in basit ve etkili bile\u015fenleri ve react-select k\u00fct\u00fcphanesinin sa\u011flad\u0131\u011f\u0131 fonksiyonlar ile geli\u015ftirmeyi h\u0131zl\u0131 ve verimli bir \u015fekilde ger\u00e7ekle\u015ftirebilirsiniz. Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla React ve Shadcn  ile ilgili i\u00e7eri\u011fe fatihsoysal.com<\/a> adresinden ula\u015fabilirsiniz.<\/p>\n
Ayr\u0131ca,  konu ile ilgili daha fazla bilgi i\u00e7in a\u015fa\u011f\u0131daki kaynaklara g\u00f6z atabilirsiniz:<\/p>\n