Создание custom select на React и CSS

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Введение

Создание кастомного компонента select в React и CSS может показаться сложной задачей для новичков, но на самом деле это отличный способ улучшить свои навыки и понять, как работают React-компоненты и стилизация в CSS. В этой статье мы рассмотрим, как создать базовый компонент select, стилизовать его с помощью CSS и добавить функциональность для интерактивности. Мы также рассмотрим дополнительные возможности, такие как анимация и поддержка клавиатуры, чтобы сделать наш компонент более удобным и функциональным.

Кинга Идем в IT: пошаговый план для смены профессии

Создание базового компонента Select в React

Первым шагом будет создание базового компонента select в React. Для этого нам понадобится создать новый файл CustomSelect.js и написать следующий код:

jsx

Скопировать код

import React, { useState } from 'react';

const CustomSelect = ({ options }) => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleSelect = (option) => {
    setSelectedOption(option);
  };

  return (
    <div className="custom-select">
      <div className="select-box" onClick={() => setShowOptions(!showOptions)}>
        {selectedOption ? selectedOption.label : 'Выберите опцию'}
      </div>
      <div className="options">
        {options.map((option) => (
          <div key={option.value} className="option" onClick={() => handleSelect(option)}>
            {option.label}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CustomSelect;

Здесь мы создаем компонент CustomSelect, который принимает массив options в качестве пропсов. Мы используем хук useState для управления выбранной опцией и отображаем список опций при клике на select-box. Этот базовый компонент является основой для нашего кастомного select и позволяет нам выбирать опции из списка.

Стилизация Select с помощью CSS

Теперь, когда у нас есть базовый компонент, давайте добавим стилизацию с помощью CSS. Создадим файл CustomSelect.css и добавим следующие стили:

CSS

Скопировать код

.custom-select {
  position: relative;
  width: 200px;
  font-family: Arial, sans-serif;
}

.select-box {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  background-color: #fff;
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  display: none;
}

.option {
  padding: 10px;
  cursor: pointer;
}

.option:hover {
  background-color: #f0f0f0;
}

Эти стили создадут базовый вид для нашего кастомного select. Мы используем позиционирование для списка опций и добавляем стили для hover-эффекта. Стилизация является важной частью создания пользовательского интерфейса, так как она определяет, как будет выглядеть наш компонент и как он будет взаимодействовать с пользователем.

Добавление функциональности и интерактивности

Теперь давайте добавим функциональность для интерактивности нашего компонента. Мы добавим возможность показывать и скрывать список опций при клике на select-box. Для этого обновим наш компонент CustomSelect:

jsx

Скопировать код

import React, { useState } from 'react';
import './CustomSelect.css';

const CustomSelect = ({ options }) => {
  const [selectedOption, setSelectedOption] = useState(null);
  const [showOptions, setShowOptions] = useState(false);

  const handleSelect = (option) => {
    setSelectedOption(option);
    setShowOptions(false);
  };

  return (
    <div className="custom-select">
      <div className="select-box" onClick={() => setShowOptions(!showOptions)}>
        {selectedOption ? selectedOption.label : 'Выберите опцию'}
      </div>
      {showOptions && (
        <div className="options">
          {options.map((option) => (
            <div key={option.value} className="option" onClick={() => handleSelect(option)}>
              {option.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default CustomSelect;

Теперь список опций будет отображаться только при клике на select-box, и скрываться при выборе опции. Мы также добавили условный рендеринг для списка опций. Это делает наш компонент более интерактивным и удобным для пользователя, так как он может видеть только те опции, которые ему нужны в данный момент.

Дополнительные возможности

Анимация

Добавление анимации может сделать наш компонент более плавным и приятным в использовании. Мы можем добавить CSS-анимацию для плавного открытия и закрытия списка опций. Обновим наш файл CustomSelect.css:

CSS

Скопировать код

.options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.options.show {
  display: block;
  opacity: 1;
}

И обновим компонент CustomSelect:

jsx

Скопировать код

import React, { useState } from 'react';
import './CustomSelect.css';

const CustomSelect = ({ options }) => {
  const [selectedOption, setSelectedOption] = useState(null);
  const [showOptions, setShowOptions] = useState(false);

  const handleSelect = (option) => {
    setSelectedOption(option);
    setShowOptions(false);
  };

  return (
    <div className="custom-select">
      <div className="select-box" onClick={() => setShowOptions(!showOptions)}>
        {selectedOption ? selectedOption.label : 'Выберите опцию'}
      </div>
      <div className={`options ${showOptions ? 'show' : ''}`}>
        {options.map((option) => (
          <div key={option.value} className="option" onClick={() => handleSelect(option)}>
            {option.label}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CustomSelect;

Теперь наш список опций будет плавно появляться и исчезать при клике на select-box, что улучшает пользовательский опыт.

Подробнее об этом расскажет наш спикер на видео

Поддержка клавиатуры

Для улучшения доступности нашего компонента мы можем добавить поддержку клавиатуры. Это позволит пользователям выбирать опции с помощью клавиш стрелок и Enter. Обновим наш компонент CustomSelect:

jsx

Скопировать код

import React, { useState } from 'react';
import './CustomSelect.css';

const CustomSelect = ({ options }) => {
  const [selectedOption, setSelectedOption] = useState(null);
  const [showOptions, setShowOptions] = useState(false);
  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);

  const handleSelect = (option) => {
    setSelectedOption(option);
    setShowOptions(false);
    setFocusedOptionIndex(-1);
  };

  const handleKeyDown = (e) => {
    if (e.key === 'ArrowDown') {
      setFocusedOptionIndex((prevIndex) => (prevIndex + 1) % options.length);
    } else if (e.key === 'ArrowUp') {
      setFocusedOptionIndex((prevIndex) => (prevIndex – 1 + options.length) % options.length);
    } else if (e.key === 'Enter' && focusedOptionIndex >= 0) {
      handleSelect(options[focusedOptionIndex]);
    }
  };

  return (
    <div className="custom-select" tabIndex="0" onKeyDown={handleKeyDown}>
      <div className="select-box" onClick={() => setShowOptions(!showOptions)}>
        {selectedOption ? selectedOption.label : 'Выберите опцию'}
      </div>
      <div className={`options ${showOptions ? 'show' : ''}`}>
        {options.map((option, index) => (
          <div
            key={option.value}
            className={`option ${index === focusedOptionIndex ? 'focused' : ''}`}
            onClick={() => handleSelect(option)}
          >
            {option.label}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CustomSelect;

И добавим стили для фокусированной опции в CustomSelect.css:

CSS

Скопировать код

.option.focused {
  background-color: #e0e0e0;
}

Теперь пользователи смогут выбирать опции с помощью клавиатуры, что делает наш компонент более доступным и удобным для всех пользователей.

Заключение и советы

Создание кастомного компонента select в React и CSS может быть полезным упражнением для понимания работы с компонентами и стилизацией. Вот несколько советов для улучшения вашего компонента:

Добавьте анимацию для плавного открытия и закрытия списка опций.
Реализуйте поддержку клавиатуры для улучшения доступности.
Добавьте возможность поиска по опциям для удобства пользователей.
Подумайте о добавлении валидации и обработки ошибок для улучшения пользовательского опыта.
Рассмотрите возможность использования библиотеки для управления состоянием, если ваш компонент станет более сложным.

Создание кастомных компонентов позволяет вам гибко настраивать внешний вид и функциональность вашего приложения. Надеемся, что эта статья помогла вам понять основные шаги для создания кастомного select в React и CSS. Удачи в ваших проектах! 😉

Создание custom select на React и CSS

Пройдите тест, узнайте какой профессии подходите

Введение

Создание базового компонента Select в React

Стилизация Select с помощью CSS

Добавление функциональности и интерактивности

Дополнительные возможности

Анимация

Поддержка клавиатуры

Заключение и советы

Читайте также