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

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 `` :(

top 2 comments

sorted by: hot top controversial new old

[–] beefsquatch@programming.dev 1 points 1 year ago

I usually wrap Reach's Dialog https://reach.tech/dialog so things like focus, esc, scroll, etc. are all handled out of the box. It's a controlled component that uses a div and Portal rather than a dialog tag

[–] 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.