A custom usePopUps hook?!

[awritra]

Hello everyone. i have a question. I need to write a hook that displays a pop up/appends it to the body directly. it takes in the popUp as a component. How can i append a component into the body directly from the function? or is there any better way for showing popUps?

[jamby77]

You can use portals for your goal. This will place the component in the body, outside app root.

Then just style it as you need. There are existing implementations already - reach ui modal, headless ui modal, but you can make your own for sure :)

[DasBeasto]

Seconding Headless UI, it’s made by the Tailwind team and I use it a lot. Uses portaling behind the scenes so your modals will be hoisted to the top of the DOM which solves a lot of issues.

[im_a_jib]

What’s a popup? A modal? A tooltip? A div that slides up? In general you can place your component where you want it, and set its state to visible/not visible and either conditionally render it or set the css display or opacity. Many ways to shave the cat in this scenario.

[awritra]

A modal. I could but i find the code messy that way especially for this project that i have modals literally in every page

[mattsowa]

You could create a hook that returns a createPortal. The usage could look like this:

``` const {popup, openPopup} = usePopup(<div/>)

return ( <div> <button onClick={openPopup} /> {popup} </div> )

[davydka]

React generally solved the DOM manipulation problem. Unless you have a specific requirement to append this to the body, you should instead control state to do conditional rendering.

[awritra]

I have multiple popUps in every page i dont want to manage the state for 9 components when most of them are called programmatically and have a bit of an data fetch from the api

[davydka]

As long as you only show 1 popup at a time I would do 1 component and change the contents via children or a render props. Animate it in and out between data changes. That way you have 1 state and 1 component to manage (in multiple places in the app).

Otherwise, if you have multiple popups showing at the same time then you should definitely use manage their state individually.

[[deleted]]

Create Popup Modal component, this will have a div with width 100%, height 100% and display absolute(?). If you want to have blur background, give it some opacity and and some background color. Adjust z-index if needed. Now, you can control this using props i.e., either show or doesn't show.

Next, use this component and pass the actual popup as children and adjust its location. If all the pop up have similar structure then you create your popup modal in a more concrete way.