Скрытие не вмещаемых элементов в Dropdown в React
HTML-код
- Опубликовано: 13 июн 2024
- В данном видео рассмотрим, как можно скрыть не вмещаемые в нужную область элементы под Dropdown.
Давольно интересный кейс, который часто встречается чуть более сложных компонентах. Был снять по предложению одного из подписчиков, поэтому если есть хорошие идеи - не стесняйтесь.
Ссылка на CodeSandbox:
codesandbox.io/s/hide-element...
Ссылка на видео про useMutationObserver:
• Важные аспекты при раб...
Ссылка на Telegram канал:
telegram.me/ayub_begimkulov_c...
Timecodes:
00:00-01:17 - Intro
01:17- 02:40 - Рассматриваем пример
02:40-06:06 - Добавляем dropdown и рассматриваем алгоритм действий
06:06-17:17 - Начинаем реализовывать логику скрытия
17:17-23:25 - Реализовываем скрытие элементов по их id
23:25-31:17 - Добавляем поддержку ресайза
31:17-37:30 - Добавляем замер gap’а между элементами
37:30-39:40 - Заключение
Комментарий в целях поддержки канала)
Спасибо!
Спасибо за отличный урок!
Рад помочь.
Классный и полезный контент, продолжай!!! #react #js #it
Спасибо!
если запустить локально то моргание будет, почему в codesandbox при первом рендере нет моргания?
Спасибо, было интересно. Но почему-то кейс когда всё элементы вмещаются и саму кнопку show more нужно прятать не учтён)
Да, забыл про этот кейс.
Cпосибо за качественный контент. Можно ли создать свой хук похож на react query для нашего собственного проекта или использовать его, не создавая его?
Не совсем понял вопроса, ты хочешь создать хук, со сходим функционалом, чтобы не юзать библиотеку?
Можно немного проще: смотреть на высоту контейнера с кнопками и если эта высота больше, чем высота одной строки кнопок - удаляем по одной кнопке с конца, пока высота не станет равна одной строке - значит все кнопки поместились, а все удалённые уже закидываем в дропдаун
Этот вариант более реюзабельрый потому что можно использовать с любыми элементами любой высоты)
@@simongaming1118 да, но с заморочками с подсчётом ширины)
Проблема данного варианта в том, что тут будет очень большой удар по перфоманс.
На первый взгляд может быть не понятно почему, но при замере и последующем обновлении дома внутри цикла будет постоянно происходить reflow.
Так что данный вариант точно не самый лучший.
Про фазы рендеринга браузера надо будет снять отдельный видос.
@@ayub_begimkulov да это проблема кончено, лучше тогда использовать вариант с подсчётом ширины, как в видео
Привет, предлагаю тебе идею для канала! Я недавно писал компонент Notification, хотелось бы посмотреть как это сделаешь ты в лайф коддинге! Поскольку у меня при написании возникали трудности🙃
Привет, неплохая идея.
Запишу себе в лист на лайв кодинг, вообще идея сделать полную либу компонентов в лайве.
@@ayub_begimkulov было бы очень круто. уверен многие поддержат лайком.