Создавайте красивые раскрывающиеся списки с помощью React Select
Оживите свои скучные раскрывающиеся списки с помощью этой гибкой библиотеки React.
Входные данные выбора — это полезный компонент веб-приложения, который позволяет выбирать значение из множества вариантов, не занимая много места. Но стиль по умолчанию может быть скучным и противоречить остальному дизайну.
React Select предоставляет гибкое и настраиваемое решение для улучшения внешнего вида и функциональности раскрывающихся полей ввода.
Установка React Select
Интеграция React с другими библиотеками или технологиями, такими как React Select, React Redux и многими другими, может упростить процесс разработки.
Чтобы начать работу с React Select, вам необходимо установить его в свой проект. Чтобы сделать это с помощью npm, запустите следующую команду терминала в каталоге вашего проекта:
npm i --save react-select
При этом библиотека будет установлена и настроена в вашем проекте React, и вы сможете начать ее использовать.
Создание входных данных выбора с помощью React Select
Теперь, когда вы настроили библиотеку, вы можете использовать ее для создания выбранных входов. Для этого вы будете использовать компонент Select. Это легко настраиваемый компонент, который позволяет пользователям выбирать параметры из списка.
Вот пример использования компонента Select:
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
Этот пример начинается с импорта компонента Select из «react-select». Он определяет массив options с тремя объектами, каждый из которых имеет значение и свойство label. Свойство value представляет значение, которое форма отправит на серверную часть при ее отправке. Свойство label — это текст, который компонент Select будет отображать в раскрывающемся списке.
При рендеринге компонента Select передайте ему массив параметров с помощью свойства options.
С помощью этого блока кода библиотека React Select создаст раскрывающийся список, подобный этому:
Настройка выбранных входов
React Select предоставляет различные способы настройки выбранных входных данных. Вы можете использовать классы CSS или применять встроенные стили непосредственно к выбранным входным данным в соответствии с вашими предпочтениями.
Настройка с помощью классов CSS
Библиотека React Select предоставляет свойство className для компонента Select. Используйте эту опцию className, чтобы применить пользовательские стили каскадной таблицы стилей (CSS) к компонентам Select.
Например:
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
Приведенный выше блок кода похож на предыдущий, но в нем используется свойство className для применения пользовательского класса CSS к компоненту Select. Укажите имя в свойстве className, и вы сможете использовать его для применения стилей CSS к компоненту:
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
После определения стилей ваш выбор будет выглядеть следующим образом:
Настройка с помощью встроенных стилей
Вы также можете определить встроенные стили в объекте, который передается через свойство styles компонента Select. Это дает вам больше контроля над стилем отдельных элементов.
Вот пример:
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
Объект prop, customStyles, содержит свойства стиля для частей control, option и menu компонента Select. Эти свойства представляют собой функции, принимающие два аргумента: baseStyles и state.
Параметр baseStyles представляет стили по умолчанию, предоставляемые React Select, а параметр состояния представляет текущее состояние элемента. В этом примере функции используют оператор распространения для объединения базовых стилей с дополнительными стилями для каждой части компонента.
После применения этих стилей ваш выбор должен выглядеть следующим образом:
Добавление функциональности к выбранным входам
React Select предоставляет несколько функций для улучшения функциональности выбранных входов. Вы можете включить функцию множественного выбора и поиска и даже создать собственные компоненты раскрывающегося списка.
Множественный выбор функций
Чтобы включить функцию множественного выбора в раскрывающихся списках, передайте свойство isMulti компоненту Select. Это позволяет пользователям выбирать несколько вариантов из раскрывающегося меню.
Например:
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
В этом примере показано, как использовать свойство isMulti для добавления функции множественного выбора к входным данным выбора.
Функциональность поиска
Библиотека React Select предоставляет встроенные функции поиска, позволяющие легко фильтровать параметры. По умолчанию компонент «Выбор» отображает входные данные поиска при открытии раскрывающегося списка. Пользователи могут ввести поисковый запрос, чтобы отфильтровать доступные параметры.
Чтобы включить функцию поиска, передайте свойство isSearchable компоненту Select. Как и свойство isMulti, isSearchable принимает логическое значение.
Вот пример использования свойства isSearchable для включения функции поиска:
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
При рендеринге приведенного выше блока кода отобразится поле выбора с функцией поиска. Он будет выглядеть и функционировать следующим образом:
Создание пользовательских компонентов раскрывающегося списка
React Select позволяет создавать собственные компоненты раскрывающегося списка, используя свойствоComponents. Вы можете переопределить компоненты по умолчанию, предоставляемые React Select, и настроить внешний вид и поведение раскрывающегося списка по своему вкусу.
Например:
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>↓</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
В этом блоке кода показано, как создать пользовательские компоненты для ввода выбора с помощью свойства comComponents компонента Select. Он импортирует объект компоненты, который представляет собой набор предварительно определенных компонентов, которые вы можете использовать для настройки внешнего вида и поведения различных элементов в выбранных вами входных данных.
Код определяет два функциональных компонента: CustomOption и CustomDropdownIndicator. Компонент CustomOption принимает объект в качестве параметра. Этот объект содержит различные свойства, предоставляемые React Select, такие как innerProps и label.
Компонент CustomDropdownIndicator принимает в качестве параметра props. Этот компонент отображает пользовательский раскрывающийся индикатор с символом стрелки вниз. Код создает объект customComponents, который сопоставляет компоненты CustomOption и CustomDropdownIndicator с соответствующими ключами Option и DropdownIndicator.
Наконец, этот код передает объект customComponents в свойство компонентов компонента Select. Это отобразит выбранный ввод с пользовательскими компонентами, выглядящий следующим образом:
Стандартные компоненты могут быть более мощными и привлекательными
React Select — это мощная библиотека, которая позволяет создавать красивые и стильные поля выбора в React. Вы можете настроить выбранные входные данные, добавить к ним функциональность и создать собственные компоненты раскрывающегося списка. Воспользовавшись преимуществами этой библиотеки, вы можете улучшить внешний вид и удобство использования ваших приложений React.