React Select ile Güzel Açılır Menüler Oluşturun

React Select ile Güzel Açılır Menüler Oluşturun
Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi yaptığınızda ortaklık komisyonu kazanabiliriz. Devamını oku.

Seçme girişi, fazla yer kaplamadan birçok seçenek arasından bir değer seçmenize olanak tanıyan kullanışlı bir web uygulaması bileşenidir. Ancak varsayılan stil sıkıcı olabilir ve tasarımınızın geri kalanıyla çatışabilir.





MUO Günün videosu İÇERİĞE DEVAM ETMEK İÇİN KAYDIRIN

React Select, açılır girişlerin görünümünü ve işlevselliğini geliştirmek için esnek ve özelleştirilebilir bir çözüm sunar.



React Select'in Kurulumu

React'ı diğer kütüphaneler veya teknolojilerle entegre etme React Select, React Redux ve çok daha fazlası gibi geliştirme sürecini kolaylaştırabilir.





google home mini wifi'ye bağlanmıyor

React Select'i kullanmaya başlamak için projenize yüklemeniz gerekir. İle bunu npm kullanarak yap , bu terminal komutunu proje dizininizde çalıştırın:

 npm i --save react-select

Bu, kütüphaneyi React projenize yükleyip kuracaktır, böylece onu kullanmaya başlayabilirsiniz.



React Select ile Select Girişleri Oluşturma

Artık kitaplığı kurduğunuza göre, bunu seçili girişler oluşturmak için kullanabilirsiniz. Bunu yapmak için şunları kullanacaksınız: Seçme bileşen. Bu, kullanıcıların bir listeden seçenekleri seçmesine olanak tanıyan son derece özelleştirilebilir bir bileşendir.

Select bileşeninin nasıl kullanılacağına ilişkin bir örnek:



 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} /> 
    </div> 
  ) 
} 
 
export default App

Bu örnek, içe aktarmayla başlar. Seçme “dan bileşen tepki seç ”. Bir tanımlar seçenekler her biri bir değere sahip üç nesneden oluşan dizi değer ve bir etiket mülk. Value özelliği, formu gönderdiğinizde arka uca göndereceği değeri temsil eder. label özelliği, Select bileşeninin açılır menüde görüntüleyeceği metindir.

Select bileşenini oluşturduğunuzda, seçenekler dizisini ona kullanarak iletin. seçenekler destek.



Bu kod bloğuyla React Select kütüphanesi şöyle bir açılır menü oluşturacaktır:

React Select kitaplığı tarafından oluşturulan varsayılan bir açılır bileşen

Seçim Girişlerini Özelleştirme

React Select, seçim girişlerini özelleştirmek için çeşitli yollar sunar. Tercihlerinize göre CSS sınıflarını kullanabilir veya satır içi stilleri doğrudan seçilen girişlere uygulayabilirsiniz.

CSS Sınıflarıyla Özelleştirme

React Select kütüphanesi şunları sağlar: sınıf adı için pervane Seçme bileşen. Bu className pervanesini kullanın özel Basamaklı Stil Sayfası (CSS) uygulamak için Stilleri Select bileşenlerinize ekleyin.

Örneğin:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} className='select'/> 
    </div> 
  ) 
} 
 
export default App

Yukarıdaki kod bloğu öncekine benzer, ancak sınıf adı özel bir CSS sınıfı uygulamak için prop Seçme bileşen. className prop'ına bir ad verin ve bunu bileşene CSS stilleri uygulamak için kullanabilirsiniz:

 .select { 
  color: #333333; 
  font-family: cursive; 
  inline-size: 30%; 
  font-size: 11px; 
}

Stilleri tanımladıktan sonra seçim girişiniz şöyle görünecektir:

React Select kütüphanesinin className prop kullanılarak şekillendirilmiş bir açılır bileşeni

Satır İçi Stillerle Özelleştirme

Satır içi stilleri, aracılığıyla ilettiğiniz bir nesnede de tanımlayabilirsiniz. stiller pervanesi Seçme bileşen. Bu size bireysel öğelerin stili üzerinde daha fazla kontrol sağlar.

İşte bir örnek:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  const customStyles = { 
    control: (baseStyles, state) => ({ 
      ...baseStyles, 
      backgroundColor: "#e2e2e2", 
    }), 
    option: (baseStyles, state) => ({ 
      ...baseStyles, 
      backgroundColor: state.isFocused ? "#e2e2e2" : "", 
      color: state.isFocused ? "#333333" : "#FFFFFF", 
    }), 
    menu: (baseStyles, state) => ({ 
      ...baseStyles, 
      backgroundColor: "#333333", 
    }), 
  } 
 
  return ( 
    <div> 
      <Select options={options} styles={customStyles} /> 
    </div> 
  ) 
} 
 
export default App

Destek nesnesi, özel stiller , Select bileşeninin stil özelliklerini içerir kontrol , seçenek , Ve Menü parçalar. Bu özellikler iki bağımsız değişken alan işlevlerdir: temel stiller Ve durum .

baseStyles parametresi, React Select tarafından sağlanan varsayılan stilleri temsil ederken, state parametresi ise öğenin mevcut durumunu temsil eder. Bu örnekte işlevler, bileşenin her bir parçası için baseStyle'ları ekstra stillerle birleştirmek için spread operatörünü kullanır.

Bu stilleri uyguladıktan sonra seçim girişiniz şöyle görünmelidir:

React Select kütüphanesinin, stiller prop kullanılarak stillendirilmiş bir açılır bileşeni

Seçim Girişlerine İşlevsellik Ekleme

React Select, seçili girişlerin işlevselliğini geliştirmek için çeşitli özellikler sağlar. Çoklu seçim ve arama işlevlerini etkinleştirebilir ve hatta özel açılır bileşenler oluşturabilirsiniz.

Çoklu Seçim İşlevselliği

Açılır listelerinizde çoklu seçim işlevini etkinleştirmek için isMulti Select bileşenine prop. Bu, kullanıcıların açılır menüden birden fazla seçenek seçmesine olanak tanır.

Örneğin:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
    { value: "grapes", label: "Grapes" }, 
    { value: "orange", label: "Orange" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} isMulti /> 
    </div> 
  ) 
} 
 
export default App

Bu örnek, nasıl kullanılacağını gösterir. isMulti Çoklu seçim işlevini seçili girişlerinize eklemek için prop.

React Select kitaplığının çoklu seçim işlevine sahip açılır bileşeni

Arama İşlevselliği

React Select kitaplığı, seçenekleri kolayca filtrelemek için yerleşik arama işlevi sağlar. Varsayılan olarak Select bileşeni, açılır menüyü açtığınızda arama girişini görüntüler. Kullanıcılar mevcut seçenekleri filtrelemek için arama girişini yazabilir.

Arama işlevini etkinleştirmek için aranabilir desteklemek Seçme bileşen. Gibi isMulti prop, isSearchable bir boole değeri kabul eder.

Arama işlevini etkinleştirmek için isSearchable özelliğinin nasıl kullanılacağına dair bir örnek:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "apricot", label: "Apricot" }, 
    { value: "mango", label: "Mango" }, 
    { value: "mangosteens", label: "Mangosteens" }, 
    { value: "avocado", label: "Avocado" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} isSearchable /> 
    </div> 
  ) 
} 
 
export default App

Yukarıdaki kod bloğunun işlenmesi, arama işlevine sahip bir seçme girişi görüntüleyecektir. Şöyle görünecek ve çalışacak:

React Select kütüphanesinin arama işlevine sahip bir açılır bileşeni

Özel Açılır Bileşenler Oluşturun

React Select, Components prop'ı kullanarak özel açılan bileşenler oluşturmanıza olanak sağlar. React Select tarafından sağlanan varsayılan bileşenleri geçersiz kılabilir ve açılır menünün görünümünü ve davranışını zevkinize göre özelleştirebilirsiniz.

Örneğin:

 import React from "react" 
import Select, { components } from "react-select" 
 
function App() { 
  const CustomOption = (obj) => ( 
    <div {...obj.innerProps}> 
      <span>{obj.label}</span> 
      <span style={{ marginInlineStart: "0.2rem" }}>Fruit</span> 
    </div> 
  ) 
 
  const CustomDropdownIndicator = (props) => ( 
    <components.DropdownIndicator {...props}> 
      <span>&darr;</span> 
    </components.DropdownIndicator> 
  ) 
 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  const customComponents = { 
    Option: CustomOption, 
    DropdownIndicator: CustomDropdownIndicator, 
  } 
 
  return <Select options={options} components={customComponents} /> 
} 
 
export default App

Bu kod bloğu, bir seçme girişi için özel bileşenlerin nasıl oluşturulacağını gösterir. bileşenler pervanesi Seçme bileşen. İthal ediyor bileşenler Seçtiğiniz girişlerinizdeki çeşitli öğelerin görünümünü ve davranışını özelleştirmek için kullanabileceğiniz, önceden tanımlanmış bileşenlerin bir koleksiyonu olan nesne.

Kod iki işlevsel bileşeni tanımlar: Özel Seçenek Ve Özel Açılır Gösterge . CustomOption bileşeni bir nesneyi parametre olarak alır. Bu nesne, React Select'in sağladığı çeşitli özellikleri içerir; içProps Ve etiket .

CustomDropdownIndicator bileşeni şunları alır: sahne donanımı parametre olarak. Bu bileşen, aşağı ok sembolüne sahip özel bir açılır liste göstergesi oluşturur. Kod bir oluşturur özel Bileşenler CustomOption ve CustomDropdownIndicator bileşenlerini karşılık gelen bileşenlerle eşleyen nesne Seçenek Ve Açılan Gösterge anahtarlar.

Son olarak bu kod, CustomComponents nesnesini Select bileşeninin Components prop'ına aktarır. Bu, özel bileşenlerle aşağıdaki gibi görünen bir seçme girişi oluşturacaktır:

React Select kitaplığı tarafından oluşturulan özel bir açılır bileşen

Standart Bileşenler Daha Güçlü ve Çekici Olabilir

React Select, React'te güzel ve şık seçim girişleri oluşturmanıza olanak tanıyan güçlü bir kitaplıktır. Seçilen girişleri özelleştirebilir, bunlara işlevsellik ekleyebilir ve özel açılır bileşenler oluşturabilirsiniz. Bu kitaplığın avantajlarından yararlanarak React uygulamalarınızın görünümünü ve kullanıcı deneyimini geliştirebilirsiniz.