Comment by lelanthran

Comment by lelanthran 14 hours ago

3 replies

View on Hacker News

>> the code he is displaying is definitely idiomatic React

> It's really not.

Of the React projects I've seen (including a ton on github), none of them used the browsers dialog without a React wrapper.

A quick search on google for a React project using `<dialog>` found none. Similar for github.

If you have an example, I'd like to see a link, because I'm skeptical that React projects are using `<dialog>` without wrapping it in React.

robertoandred 13 hours ago

I'm not sure what you're searching for or what you consider "wrapping it in React". You need some sort of JS to open and close it.

const Modal = ({ isOpen, onRequestClose, ...rest }: ComponentProps<"dialog"> & { isOpen: boolean; onRequestClose: () => unknown; }) => {

  const dialogRef = useRef<HTMLDialogElement>(null);

  useLayoutEffect(() => {
    if (isOpen) {
      dialogRef.current?.showModal();
    } else {
      dialogRef.current?.close();
    }
  }, [isOpen]);

  return (
    <dialog
      ref={dialogRef}
      onClose={(e) => {
        e.preventDefault();
        onRequestClose();
      }}
      {...rest}
    />
  );
};
Reply View 0 replies
lolinder 13 hours ago

You're missing the main point that OP is making: TFA's complaint with these patterns isn't that it's React, it's that it's not using the modern tooling. That is true, but could just as easily be an argument for updating old React code bases to take advantage of the new features. There's nothing inherently React about avoiding using them, it's usually done because of some combination of lack of knowledge of the changes and a need for various reasons to support old browsers. (Yes, a lot of real world use cases still require supporting versions of Safari older than 15.4 [0]).

It's not fair to take these legacy patterns, which are what made React and friends so much better than the other options that were available at the time, and compare them to features that were specifically built with the intention of making those patterns no longer necessary.

Once those new features are supported on most devices (which again, they aren't in many cases) I'm excited to see them incorporated into code bases written in any framework.

[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

Reply View 0 replies