How To Make Popover Menu React Component With Floating UI

Опубликовано: 23 Июнь 2023
на канале: Radzion Dev
3,344
18

In this video, I share how to create a reusable React component to display a menu. I frequently use this component in various situations on my app. This tutorial will take you through how to implement both a slide-over for mobile versions and a popover for desktop versions. I'll explain how to use properties like 'title', 'renderOpener' and 'renderContent' to customize the menu. This tutorial also shares the usage of the 'useFloating' and 'useDismiss' hooks, and accessibility considerations with the 'FocusTrap' component. Join me as I walk you through the process using real examples from my own app.

Demo: https://kit.radzion.com/menu

Source code: https://github.com/radzionc/radzionki...

Accelerate your work and reach your goals faster with https://increaser.org – where deep work, time mastery, and habit shaping converge for your success! 💪🚀


Смотрите видео How To Make Popover Menu React Component With Floating UI онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Radzion Dev 23 Июнь 2023. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 3,344 раз и оно понравилось 18 посетителям.