What type to use to create a half page in reactjs?

Software Development Programming Help
#1

I am working on a software project that will allow the user to create a chat. My application will have a chat button which when clicked by the user will trigger the display of a rising half page spanning the screen in length and which can be topped, like this:, Here I take a example on the vscode console and the circled button is the button I would like to create at the top of the window to allow overriding it. My main concern is that I don’t know how to create this type of page and when I search the web I see tutorials for creating modal windows and courses for getting started in reactjs. I’m brand new to reactjs and hope to get help from more experienced members of the community.

Thank you for reading my question and I look forward to your responses.

#2

not very sure if I’m getting all of your details, but one thing is that, it seems it’s similar to a pop-up window chat, you may want to check this out

#3

Thank you very much for your help. With the floating button that opens a popup window for chatting and the ability to close that window, the principle is almost the same. But that doesn’t really cover my application’s need, maybe I wasn’t clear enough. I would like the floating button to display another page on the page currently on click like your illustration, but the page would take up the screen its full width (smaller side) and half the screen lengthwise. This library creates windows that occupy the screen in length more than in width and I am looking for a library that does the opposite.