DEV Community

Cover image for Your next React Modal with your own "useModal" Hook & Context API.

Your next React Modal with your own "useModal" Hook & Context API.

Alex Suarez on March 01, 2020

Hi there everyone, this is a quick review about how to use Modals Components in your React project combining Hooks, Context, and Portals. You need ...
Collapse
 
rhysnicholls profile image
Rhys Nicholls • Edited

Hi Alex. Excellent tutorial which has helped me alot and I have a follow up question
I'm wanting to close the modal using a button nested inside of modalContent passed to handleModal.
How would I go about this?
I have tried using handleModal for the onClick of the button but nothing happens.
This may be a hole in my knowledge

Collapse
 
alexandprivate profile image
Alex Suarez

Done Rhys, article updated!

Collapse
 
alexandprivate profile image
Alex Suarez

Hi there Rhys sorry for the late response, let's revamp the article to show that use case, I will address that part in a section with you question

Collapse
 
james12 profile image
James

Hello,

First of all, apologies for commenting on a post from over a year ago and if you're still active here, then thank you.

I am wondering how to go about implementing the scenario where state needs to be shared between the modal and component from where it's rendered. I somehow need a way to re-render the modal if a prop changes

This is a codesandbox of a simple example: codesandbox.io/s/unruffled-newton-...

I will keep this question updated on how I get along with trying to find a clean solution

Collapse
 
hrommi profile image
Stepan Zasimenko

Hi, nice article. But in the old version of the react documentation it is not recommended to save the components in the state. What do you think about it?

Collapse
 
alexandprivate profile image
Alex Suarez

Hi there Stepan, thanks for sharing, yes as you mentioned that's old but true!! I will not do it, in this case, this is just a quick example of how to solve a use case without fully refactoring the context, but you are totally right!! states = data.

Collapse
 
hi_natew profile image
Nate Wang

Here's a similar implementation: github.com/eBay/nice-modal-react

Collapse
 
jrbentham profile image
Joel Robles Bentham

Hi, excellent job. But i get stoked when i wanted to open a modal after some other action besides the clicking, for example if i want to open a pop up modal on page ready.
it can be done?

Collapse
 
alexandprivate profile image
Alex Suarez

Done Joel article updated

Collapse
 
alexandprivate profile image
Alex Suarez

Hi there Joel sure you can, let me revam article and we can address that use case!

Collapse
 
tomliem profile image
tomliem

Hello, i'm trying to use this. But with eslint no-cycle, i can't use this pattern, because there Modal import in context, and context import in Modal.
How can i use this approach without moving Modal inside provider?

Collapse
 
developdeez profile image
developdeez

Just tried and it doesnt seem to work with a controlled textbox component. Can you add a textbox where the parent holds the state?

Collapse
 
ifrostizz profile image
Guyot François

Very good explanation, thanks !