Как заставить react-select двигаться горизонтально, когда он выходит за пределы экрана

Вопрос или проблема

const CustomMenu = (props) => {
  const referenceElement = props.selectProps?.selectProps?.controlRef;
  const popperElement = useRef(null);

  const { styles, attributes } = usePopper(referenceElement?.controlRef, popperElement.current, {
    placement: 'bottom-start',
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: document.body,
        },
      },
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
        },
      },
    ],
  });

  return (
    <div ref={popperElement} style={{ ...styles.popper, zIndex: 9999 }} {...attributes.popper}>
      Popper
      <components.Menu {...props} />
    </div>
  );
};

const controlRef = useRef(null);
<ReactSelect 
ref={controlRef}
components={{
          Menu: CustomMenu
}}
selectProps={{ controlRef: controlRef?.current }}
/>

Ответ или решение

Как заставить react-select двигаться по горизонтали, когда он выходит за пределы экрана

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

Проблема

По умолчанию react-select обеспечивает возможность регулировки положения выпадающего меню только по вертикали через свойство menuPlacement. Однако при необходимости корректировать горизонтальное положение компонента, пользователи сталкиваются с отсутствием выбора для этого.

Решение

Чтобы реализовать горизонтальное перемещение выпадающего меню, можно использовать библиотеку Popper.js для создания более сложной логики позиционирования. Вот пошаговое руководство по интеграции этой функциональности.

1. Установка зависимостей: Важно убедиться, что у вас установлены необходимые пакеты.

   npm install react-select @popperjs/core

2. Создание кастомного компонента меню: Мы создадим компонент CustomMenu, который будет использовать Popper для управления положением выпадающего меню.

import React, { useRef } from 'react';
import Select from 'react-select';
import { usePopper } from 'react-popper';

const CustomMenu = (props) => {
  const referenceElement = props.selectProps?.controlRef; // Элемент управления
  const popperElement = useRef(null); // Элемент поппера

  // Инициализация Popper
  const { styles, attributes } = usePopper(referenceElement, popperElement.current, {
    placement: 'bottom-start',
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: document.body,
        },
      },
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
        },
      },
    ],
  });

  return (
    <div ref={popperElement} style={{ ...styles.popper, zIndex: 9999 }} {...attributes.popper}>
      <components.Menu {...props} />
    </div>
  );
};

// Компонент основной Select
const App = () => {
  const controlRef = useRef(null);

  return (
    <Select
      ref={controlRef}
      components={{
        Menu: CustomMenu // Замена стандартного меню на кастомное
      }}
      selectProps={{ controlRef: controlRef.current }}
    />
  );
};

export default App;

Настройка Popper.js

• Модификатор preventOverflow: Этот модификатор следит за тем, чтобы элемент не выходил за пределы видимой области, что критично для любой выпадающей панели.
• Модификатор flip: Этот модификатор позволяет выпадающему меню автоматически перемещаться на другие позиции в случае, если первое выбранное место окажется закрытым.

Примечания

• Убедитесь, что вы правильно передаете ссылки между компонентами. Это критично для корректной работы Poser.js.
• Обратите внимание на стили zIndex, чтобы выпадающее меню отображалось поверх других элементов интерфейса.

Заключение

Используя вышеописанные шаги, вы сможете эффективно настроить горизонтальное поведение выпадающего меню в react-select. Это позволяет вам улучшить взаимодействие пользователей с вашим приложением, гарантируя, что все элементы остаются доступными и видимыми на экране. Применение Popper.js открывает большие возможности для создания адаптивных интерфейсов, которые хорошо справляются с различными сценариями использования.