Building a Modal with NextJS, TailwindCSS, and Typescript

Поділитися
Вставка
  • Опубліковано 6 жов 2024

КОМЕНТАРІ • 44

  • @dsuniverse132
    @dsuniverse132 Рік тому +1

    Thanks man, I've been using react and redux for so long and i usually used global redux state to handle my modals. Now that I'm learning next, redux has thrown me around. This helped massively

    • @yxgen4
      @yxgen4  Рік тому

      So glad I could help!!

  • @elijahdr
    @elijahdr Рік тому +4

    Thank you man this is just what I needed! Works perfectly 🙏

    • @yxgen4
      @yxgen4  Рік тому

      Happy I could help!

  • @yasinalbayrak2744
    @yasinalbayrak2744 8 місяців тому +1

    Thanks to you my friend, thanks to you i settled the code shape in my head and i improved the code i wrote before thanks to you

  • @codesader
    @codesader Рік тому

    Heading to logrocket blog to check out the article having watched your tutorial felt like taking compound V (the boys movie) ontop my superpower. That article was insane! Great content ,man. I love your breakdown.

    • @yxgen4
      @yxgen4  Рік тому

      Thanks so much for the feedback!

  • @ognjenvojnovic9778
    @ognjenvojnovic9778 8 місяців тому +1

    Nice man, nice!

  • @VincentFulco
    @VincentFulco Рік тому +1

    Thanks for the more advanced look-see. A git repo for studying the snippets in their entirety would be much appreciated

    • @yxgen4
      @yxgen4  Рік тому

      Hi Vincent, there's a link to an article in the description that you might find helpful

  • @girlwebdeveloper
    @girlwebdeveloper Рік тому +1

    thanks for sharing, it gives me some idea on my modal project. with the body scroll i think it should be set back to "visible" which is the default value, rather than "unset" or it can be set to undefined or ""

    • @yxgen4
      @yxgen4  Рік тому

      Glad I could help!

  • @APerson-d5s
    @APerson-d5s Рік тому +3

    Hello Christian, I am doing this tutorial which is great! However, I am unable to interact/click with any component within my modal? Do you have any idea on why that might be?

    • @yxgen4
      @yxgen4  Рік тому

      HI daniel, thanks for the response! if you share a github link, I'm happy to take a look
      I bet it is something related to pointer-events in tailwind
      tailwindcss.com/docs/pointer-events
      Sorry for the delayed response! Took a break for the holidays

  • @asmaakhalidy3775
    @asmaakhalidy3775 7 місяців тому

    thank you 🙏 !

  • @programador5784
    @programador5784 10 місяців тому +1

    Hello friend, thank you very much for your help, now to implement it, do you know if I should have any consideration to use it with the new appRouter; I would think not but it doesn't hurt to ask.

    • @yxgen4
      @yxgen4  10 місяців тому

      Thanks for the comment! Don’t worry about the app router, modals should use portals anyway

  • @KanishkaMrunal
    @KanishkaMrunal Рік тому

    in dashboard.tsx not seen complete ?

  • @anythingfx8950
    @anythingfx8950 Рік тому +1

    Hey Christian, could you share the code for the pomodoro game? I would love to go through the code and learn more about it :) Thank you, love you videos.

    • @yxgen4
      @yxgen4  Рік тому

      If you go through my other videos, you'll be able to see a lot of it! I'm not sharing the GitHub link for it as I'm trying to start a business

    • @anythingfx8950
      @anythingfx8950 Рік тому

      @@yxgen4Thank you for the fast reply, I understand and wish you success.

  • @shreyasagarwal341
    @shreyasagarwal341 Рік тому

    Hi I am having trouble closing the modal i actually copied your code step by step but the handle close function does not seem to be working

    • @yxgen4
      @yxgen4  Рік тому

      Hi Shreyas, if you're able to provide a github link, I'm happy to take a look at the code. If not, try adding some console logs to get a sense for why it might not be working as intended, and walk through the expected logic slowly.
      Good luck!

  • @ShivGamer
    @ShivGamer Рік тому

    Heyy, loved the video man. If possible can you share your next js code?

    • @yxgen4
      @yxgen4  11 місяців тому +1

      There is a link in the description to the code I used!

    • @ShivGamer
      @ShivGamer 11 місяців тому

      @@yxgen4Ok cool. Thanks

  • @Migler1
    @Migler1 Рік тому +1

    What theme are you using in your ide?

    • @yxgen4
      @yxgen4  Рік тому

      the 1984 theme! the cyberpunk variant

  • @hauglid123
    @hauglid123 Рік тому

    Would it be possible to see your code? I see that you linked the original source code, but it would be awesome to look at yours.

    • @yxgen4
      @yxgen4  Рік тому

      I assure you the one I linked is more helpful!

  • @sebasdeveloper3073
    @sebasdeveloper3073 Рік тому

    Thanks friend, excellent content, greetings from Colombia, could you share your vscode theme, it's great

    • @yxgen4
      @yxgen4  Рік тому +1

      I use the cyberpunk variant of the 1984 VSCode plugin! Here’s the link:
      marketplace.visualstudio.com/items?itemName=juanmnl.vscode-theme-1984

  • @yuongeon1476
    @yuongeon1476 10 місяців тому

    Hello Yugen, thanks for ur video, but I wonder that if you give the body "overflow:hidden" when open the modal, the width of screen will broken, how can I fix it

    • @yxgen4
      @yxgen4  10 місяців тому

      Hi there! Not sure I totally understand the question, overflow: hidden will hide any content that is outside of the content area. Here’s some documentation on it:
      www.w3schools.com/css/css_overflow.asp

    • @yuongeon1476
      @yuongeon1476 10 місяців тому

      @@yxgen4 I mean the layout will break when the scrollbar is hidden

    • @yuongeon1476
      @yuongeon1476 10 місяців тому

      @@yxgen4 I search it is preventing the layout shift caused by scrollbars

    • @yxgen4
      @yxgen4  10 місяців тому

      @@yuongeon1476 glad you figured it out!

  • @ICOReviewtoken
    @ICOReviewtoken Рік тому +1

    Please share source code, thanks

    • @yxgen4
      @yxgen4  Рік тому

      blog.logrocket.com/build-modal-with-react-portals/

  • @alirabiei2344
    @alirabiei2344 Рік тому

    good stuff, I really need the code for this, is there any repo?

    • @yxgen4
      @yxgen4  Рік тому

      In the description there is a link to an article that has some code! Hope this helps

  • @KanishkaMrunal
    @KanishkaMrunal Рік тому

    any one plz share only dashboard.tsx

  • @KanishkaMrunal
    @KanishkaMrunal Рік тому

    plz share source code

    • @yxgen4
      @yxgen4  Рік тому

      Hi Preetam, you can check out this link:
      blog.logrocket.com/build-modal-with-react-portals/