this post was submitted on 11 Sep 2023
3 points (100.0% liked)

React

926 readers
1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

!pico8@programming.dev

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
Ategon@programming.dev
cufta22@programming.dev
Berserker@programming.dev
3
Controlled vs uncontrolled (programming.dev)
submitted 1 year ago* (last edited 1 year ago) by pastelmind@programming.dev to c/react@programming.dev
2 comments fedilink hide all child comments
 

Do you prefer your modal component (<dialog>, <Modal>, etc.) to be controlled or uncontrolled?

Uncontrolled: When I use the HTML native <dialog>, I need to access methods on HTMLDialogElement using a ref. This feels uncomfortable and not idiomatic React.

Controlled: I prefer using a boolean prop to control the open/closed state of the dialog. However, then I need to handle some features like Close on ESC key, which may otherwise cause the open/closed state to desync from the actual dialog state. I also have to be careful about using other HTML features that may close the dialog, e.g. <button formmethod="dialog">

altogether and instead use "legacy" modals built with carefully styled <div>s. But then I give up on many of the nice features of <dialog>, such as tab focus containment and accessibility.

What is your preferred way of using modals? Controlled vs uncontrolled? <dialog> vs <div>s?

Edit: Lemmy dislikes angle brackets inside `` :(

you are viewing a single comment's thread
view the rest of the comments
[–] anon232@lemm.ee 1 points 1 year ago

Personally I use controlled, I typically create my own custom components that wrap a Dialog compoenent. These custom components will have props for thing such as the message to display, title, whether to show it or not, and an onClose callback. The onClose callback will be emitted from the custom component, which you can code to get called regardless of what method the user uses to close the dialog, then the parent component would simply toggle the boolean state of the custom dialog.