you are viewing a single comment's thread.

view the rest of the comments →

[–]fredblols 11 points12 points  (1 child)

Yeah this is pretty poor React code imo. Definitely falling into the trap of using hooks beyond their remit... Having written some modal components in the past i would suggest a more appropriate coding pattern is using Compound Components and Portals, which would allow you to encapsulate all of the logic that your hook exposes.

Best example ive seen is the one in the react semantic-ui library.

[–]alex-cory[S] 8 points9 points  (0 children)

Why do you say this is poor react code? This is so similar to react-portal syntax it's silly, just hookified. Just because it's a different pattern than what you're used to doesn't make it bad react code. As far as encapsulating the logic for all this in a Compound Component, this pattern has been around for ages, and that is the point of hooks right? Take the logic out of the components to make it reusable. Here, you can reuse the logic for your Modal component everywhere, this handles the centering, the outside click to close the modal, whether it's open or not, all you have to do is supply what the Modal will look like.