Създавайте красиви падащи менюта с React Select

Изборът на вход е полезен компонент на уеб приложение, който ви позволява да изберете стойност от много опции, без да заема много място. Но стилът по подразбиране може да бъде скучен и да се сблъсква с останалата част от дизайна ви.

React Select предоставя гъвкаво и адаптивно решение за подобряване на външния вид и функционалността на падащите входове.

Инсталиране на React Select

Интегриране на React с други библиотеки или технологии, като React Select, React Redux и много други, могат да опростят процеса на разработка.

За да започнете с React Select, трябва да го инсталирате във вашия проект. Да се направете това с помощта на npm, изпълнете тази терминална команда в директорията на вашия проект:

npm i --save react-select

Това ще инсталира и настрои библиотеката във вашия проект React, така че можете да започнете да я използвате.

Създаване на Select Inputs с React Select

Сега, след като сте настроили библиотеката, можете да я използвате за създаване на избрани входове. За да направите това, ще използвате

Изберете компонент. Това е много адаптивен компонент, който позволява на потребителите да избират опции от списък.

Ето пример за това как да използвате компонента Select:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (




 </div>
 )
}
exportdefault App

Този пример започва с импортиране на Изберете компонент от „реагиране-избиране”. То определя ан настроики масив с три обекта, всеки с a стойност и а етикет Имот. Свойството стойност представлява стойността, която формулярът ще изпрати към бекенда, когато го изпратите. Свойството label е текстът, който компонентът Select ще покаже в падащото меню.

Когато изобразявате компонента Select, предайте му масива с опции, като използвате настроики опора

С този кодов блок библиотеката React Select ще генерира падащо меню като това:

Персонализиране на избраните входове

React Select предоставя различни начини за персонализиране на избраните входове. Можете да използвате CSS класове или да приложите вградени стилове директно към избраните входове, според вашите предпочитания.

Персонализиране с CSS класове

Библиотеката React Select предоставя a className опора за Изберете компонент. Използвайте тази подложка на className за прилагане на персонализиран каскаден стилов лист (CSS) стилове към вашите избрани компоненти.

Например:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (



'select'/>
 </div>
 )
}
exportdefault App

Кодовият блок по-горе е подобен на предишния, но използва className prop за прилагане на персонализиран CSS клас към Изберете компонент. Въведете име в подложката className и можете да го използвате, за да приложите CSS стилове към компонента:

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

След като дефинирате стиловете, вашият избран вход ще изглежда така:

Персонализиране с вградени стилове

Можете също така да дефинирате вградени стилове в обект, който предавате през стилове опора на Изберете компонент. Това ви дава повече контрол върху стила на отделните елементи.

Ето един пример:

import React from"react"
import Select from"react-select"
functionApp() {
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>
 )
}
exportdefault App

Реквизитният обект, customStyles, съдържа стилови свойства за компонента Select контрол, опция, и меню части. Тези свойства са функции, които приемат два аргумента: baseStyles и състояние.

Параметърът baseStyles представлява стиловете по подразбиране, предоставени от React Select, докато параметърът state представлява текущото състояние на елемента. В този пример функциите използват оператора spread, за да комбинират baseStyles с допълнителни стилове за всяка част от компонента.

След прилагане на тези стилове вашият избран вход трябва да изглежда така:

Добавяне на функционалност към избраните входове

React Select предоставя няколко функции за подобряване на функционалността на избраните входове. Можете да активирате функцията за многократно избиране и търсене и дори да създавате персонализирани падащи компоненти.

Функционалност за избор на множество

За да активирате функцията за избор на няколко елемента във вашите падащи менюта, подайте isMulti опора към компонента Select. Това позволява на потребителите да избират множество опции от падащото меню.

Например:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]
return (




 </div>
 )
}
exportdefault App

Този пример показва как да използвате isMulti prop, за да добавите функцията за многократен избор към избраните входове.

Функционалност за търсене

Библиотеката React Select предоставя вградена функционалност за търсене за лесно филтриране на опции. По подразбиране компонентът Избор показва въведеното търсене, когато отворите падащото меню. Потребителите могат да въвеждат въведените данни за търсене, за да филтрират наличните опции.

За да активирате функцията за търсене, подайте може да се търси опора на Изберете компонент. Подобно на isMulti prop, isSearchable приема булева стойност.

Ето пример за това как да използвате isSearchable prop, за да активирате функцията за търсене:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]
return (




 </div>
 )
}
exportdefault App

Изобразяването на кодовия блок по-горе ще покаже избран вход с функция за търсене. Ще изглежда и ще функционира така:

Създайте персонализирани падащи компоненти

React Select ви позволява да създавате персонализирани падащи компоненти, като използвате компонента за компоненти. Можете да замените компонентите по подразбиране, предоставени от React Select, и да персонализирате външния вид и поведението на падащото меню според вашия вкус.

Например:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (



{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )

const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }
return<Selectoptions={options}components={customComponents} />
}
exportdefault App

Този кодов блок показва как да създадете персонализирани компоненти за избран вход, като използвате компоненти опора на Изберете компонент. Той внася компоненти обект, който е колекция от предварително дефинирани компоненти, които можете да използвате, за да персонализирате външния вид и поведението на различни елементи във вашите избрани входове.

Кодът дефинира два функционални компонента: CustomOption и Custom DropdownIndicator. Компонентът CustomOption приема обект като параметър. Този обект съдържа различни свойства, които React Select предоставя, като innerProps и етикет.

Компонентът CustomDropdownIndicator взема реквизит като параметър. Този компонент изобразява персонализиран падащ индикатор със символ със стрелка надолу. Кодът създава a customComponents обект, който картографира компонентите CustomOption и CustomDropdownIndicator към съответните опция и падащ индикатор ключове.

И накрая, този код предава customComponents обекта на компонента prop на компонента Select. Това ще изобрази избран вход с персонализираните компоненти, изглеждащ така:

Стандартните компоненти могат да бъдат по-мощни и привлекателни

React Select е мощна библиотека, която ви позволява да създавате красиви и стилни селектирани входове в React. Можете да персонализирате избраните входове, да добавите функционалност към тях и да създадете персонализирани падащи компоненти. Възползвайки се от тази библиотека, можете да подобрите външния вид и потребителското изживяване на вашите React приложения.