ТОПОВА МОДАЛКА на REACT за 6 хвилин
HTML-код
- Опубликовано: 28 май 2024
- #frontend #development #react
Привіт, я Нік і ти на каналі Dev Routine!
Посилання на проект з відео: github.com/SemX74/modal-tutorial
Стеж за нами в телеграмі: (Корисні пости і меми): t.me/+giZ-rijhq7BiZGEy
Дивись наш тікток: / dev.routine
Лайк та коментар, якщо відео було тобі корисно!
Таймкоди:
0:00 - Інтро
0:18 - Пишу модалку
6:11 - Заключення 
Наука
лайк від помідора... правда переглянув на х2, але ніби косяків не було ))) ну і мінорні зауваження: обгортати можемо не тільки в div, а й призначений для цього тег dialog (є такий в html); також вічна наша проблема з "стрибанням" контенту на 3:55 вирішується в css: `scrollbar-gutter: stable;` (а ще можна написати щось накшталт body:has(.modal){ overflow: hidden; } і буде працювати так само ); в tailwind є compound класс який призначений для overlay: inset-X; не зустрічав на практиці, щоб робили для Portal окремий компонент, перший варіант був більш канонічний; по анімаціям рекомендую глянути framer-motion (то реально махіна можливостей)! Удачі.
Чувак я безмежно вдячний за твої коменти, все записую. Не так багато маю досвіду але стараюсь поресьорчити те що говорю і донести у цікавому форматі. Ще раз. Дякую💪
p.s. Бачив у mantine портал винесений в схожий компонент, тому й сам так часто роблю :)
@@itsDevRoutine а чи треба було там оверфлоу міняти? поінтер-евентсами не обійтись?
Короч мужик, за 2 години розібрав, перелопатив код по 10 разів, мужик, просто, щастя тобі, здоровля, я чистєйшого і крутєйшого коду в житті не бачив, там на стільки продумані штуки ти використовуєш, я просто ашалєл, в 6 хв відео інфи більше чим в якомусь продвинутому 3-х годинному курсі, я ніби практики трохи маю, але після твоїх відосів думаю хоть би моїх проєктів ніхто не бачив🥲
Класно дуже з пропсами працює, розгортаєш прям в тегу всі атрибути, і розширюєш типи в інтерфейсах, я до такого не додумався))
Про tailwind знав, але щось не наважувався на ньому писати, а тут прям на рпактиці побачив, сподобалось, і ще можна кастомні класи в ньому писати.
Також clsx і classNames дуже корисна штука, задовбало кожеш раз модульні класи в {`${s.class} ${s.class2}`} писати, але правда ще не розібрав яка між ними різниця.
Ще createPortal здивувало, не знав що з іншими індексними блоками окрім "root" можна таким чином взаємодіяти.
Ось такі стилі як overscrollBehavior, дуже корисні.
А ще Object.assign прост пушка, деколи багато вкладених компонентів є, і це все в index файл запихаю (ніби глобальний інтерфейсь називається, або то я придумав таку назву😅), а потім шукай.
А ця штука document.body.style.overflow = open ? "hidden" : "auto"; завжди дував як то правильно зробити😅
А відео з useCallBack і memo дуже класно пояснено, дякую.
Відосик і код хоч коротенькі вийшли, але там такий концентрат інфи, просто моя повага
Чувак я вдячний тобі за твою роботу і твою підтримку, залишайся з нами і тебе чекає більше крутого та нового 😎
Дякую за контент. Прекрасна модалка. Проте інколи все ж швидше використати вже готову, або свою яку колись вже створив, або чиюсь.
топ, дякую
Дякую за модалочку. Заюзав в петпроджект)
прошу!
Чел ты просто гений...
Я ще не чекнув, але лайк влуплю за новий ролик
так воно має робитися, дякую!🤘
Так як в хуці useModal є стейт, а в свою чергу хук лежить в самому верху, хіба це не означає, що буде рендеритися геть все?
в тебе в любому випадку буде стейт де ти будеш хендлити стан модалки в самому верху - все буде ререндиритись.
В любому випадку всі компоненти будуть в memo в React 19, і цієї проблеми не буде
Топовий відос👍
дякую!
Нормальний контент
Привіт, міг би зробити обзор на типи якими ти розширюєш interface, такої інфи в ютубі дуже мало, зазвичай всі розказують як просто типізувати пропси, або змінні. Це було би дуже корисно, так як приходиться набагато більше писати типів в інтерфейсі, і вони розростаються, особисто в мене до великих масштабів, це би зекономило багато часу, був би дуже вдячний за такий матеріал!
в планах 🤝
Маю питання з приводу порталу. Якщо використовувати Link(react-router-dom) в середині модалки з порталом, то свариться, що подалка поза контекстом чи щось таке. Чи є ідея як то пофіксити?
спробуй useNavigate() з тієї ж ліби
@@itsDevRoutine ну як варіант виглядає непогано, дякую.
Класно, моцний лайк.
Є така цікава річ коли в проєкті потрібно використовувати різнотипні модалки, які викликаються з різних місць і потрібно якось їх менеджити (через глобал стейт і так далі, також однотипних може бути кілька одночасно на екрані - але з різним контентом.
Може цікаво буде таке зробити - я думаю глядачі бyдуть в захваті.
дякую за ідеї та за лайк!
за сеньйорів помідорів лайк!
броскі, що за тема у VSCode? 💅
Це CodeSandbox Black у виконанні Ziady Mubaraq. Використовую вже років так 2)
@@itsDevRoutine дякую 🤗♥️
Було б цікаво побачити відео про підключення оплати на сайт🧑💻
в майбутньому обовʼязково буде)
Який формат розповіді вам сподобався найбільше?
Які є варіанти?
@@andriyleliv4608 запис де код був окремо записаний від коментарів (саме це відео), або коли код пишеться з коментарями одночасно (попереднє відео)
@@itsDevRoutine цей варіант кращий як на мене
🔥🔥🔥🔥
го tooltip по сінйорному)
По сінйорному не впевнений але можемо організувати 😁
Привіт, в тебе є linkedin?
Привіт, тримай (я його не особо веду)
www.linkedin.com/in/cssemenyuk/
Лайк
дякую!
Як ж в мене горить від цих index файлів. Ну кааааамон, краще один додатковий файл замість щоб двічі написати слово Modal? Вам що руки від того відсихають?? Тим більше ж авто імпорти є в ВСКоді. Чи налаштуйте собі аліаси...Крик душі просто
кожному свій смак і колір
Нахіба це взагалі треба, якийсь манкі-кодинг
де саме манкі код?
@@denys.matsevych У відео. Ви дивились? Все там зрозуміло?
Якщо вже критикуєш, пропонуй як зробити краще будь ласка і скажи що саме не зрозуміло, анал дестроєр
В дописі є посилання на проект якщо щось пропустив, там можна розглянути код детальніше і подивитись як працюють деталі які ти не зрозумів
Сказал react.createPortal, а импортнул из react-dom. Trololo😂
Чувак. У тебя еще когда ты добавил контента в основной странице и появился скрол, то когда ты тоглил модалку, контент прыгал, так как овервлоу хиден убирал скрол и потом он снова появлялся , что мелочь но ебет глаз все равно)
бля, я записую це в 1-2 ночі після роботи, не души 😂
@@itsDevRoutine можно использовать scrollbar-gutter: stable для body, контент перестанет прыгать