Dialog with multiple Trigger's

[avremel]

The docs explain how to abstract a Dialog so it can be reused like this:

export default () => (
  <Dialog>
    <DialogTrigger>Dialog trigger</DialogTrigger>
    <DialogContent>Dialog Content</DialogContent>
  </Dialog>
);

In my use-case, I have multiple Trigger's for the same Dialog. Is there a way to render those Trigger's without having to duplicate DialogContent for each trigger?

Although I can abstract this away, it is a tad cumbersome.

[gabrielmlinassi]

Yes, there're a couple of ways:

const [isVisible, toggleVisibility] = useReducer(s => !s, false)
return (
  <>
    <button onClick={toggleVisibility}>Open Modal</button>
    <MyDialog open={isVisible} onOpenChange={toggleVisibility} />
  </>
)

...

function MyDialog({ props: {} & React.ComponentProps<typeof DialogPrimitive.Root> }) {
  if (!open) return null;
  return (
    <Dialog.Root {...props}>
      {/* without the trigger */}
      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>  
  )
}

As you may need to use it in different components, you may want to add MyDialog component upper in the tree. In Next.js for example, this could be in the App.tsx file. To be able to pass the props you'll need something like a React Context or a state management library like Zustand for ex.

function MyApp() {
  const store = useStore()
  return (
    <>
      <MyDialog open={store.isDialogVisible} onOpenChange={store.hideModal} />
      ...
    </>
  )
}

However my prefered way is to use URL state because I guess it's a better UX and a cleaner solution. To open a UserProfileModal for example, you would do something like router.push(`/?profile=${user.profile.id}\`) and to open the modal something as bellow:

function MyApp() {
  const router = useRouter();
  return (
    <>
      <MyDialog open={!!router.query.profile} onOpenChange={() => router.push('/')} />
      ...
    </>
  )
}

More details of this pattern can be found here. Although it's for Nextjs, the concept can be applied to other frameworks as well.
https://www.youtube.com/watch?v=P4W_LaotmNI&ab_channel=RyanToronto

[benoitgrelard]

Although it might look like multiple triggers would be supported, it is not.
If you think about it, it doesn't make much sense, as accessibility also belongs to the trigger, so unfortunately the solution proposed by @gabrielmlinassi isn't great for that reason.

The solution we would recommend isn't far though. The key is that instead of thinking of reusing a single "instance", think about reusing components instead.

Here's an old demo showing the same principle with a reused "content": https://codesandbox.io/s/reused-dialogcontent-0oikl

You could abstract the whole Dialog if you wanted to as well:

function DeleteProductDialog(props) {
  return (
    <Dialog.Root {...props}>
      {children}
      <Dialog.Portal>
        {/* all the content for this specific product dialog*/}
      </Dialog.Portal>
    </Dialog.Root>  
  )
}

// somewhere

<DeleteProductDialog>
   <Dialog.Trigger>Delete this product</Dialog.Trigger>
</DeleteProductDialog>

// someplace else

<DeleteProductDialog>
   <Dialog.Trigger>Delete</Dialog.Trigger>
</DeleteProductDialog>

You can do anything you want as they're just standard React components, the key is to think about composition/reuse of components, rather than reusing single instances.

✌️

[avremel]

Thank you.

That is the approach I ended up using. In practice the logic was messy since I only use a Dialog for mobile (so only render if isMobile), plus the need to pass dialog props through to each trigger (a closure would probably be useful here).

What do you mean by as accessibility also belongs to the trigger?

[benoitgrelard]

There are parts of the accessibility that is applied to the trigger.

Similarly, if you think more generally about the concept of multiple triggers, it doesn't make much sense. For example, a Popover where the content is attached to the trigger, if there were 2 triggers, where would we attach it when the component is controlled? We would have no way to know where to anchor it, etc.

Hope that helps.

[gabrielmlinassi]

@benoitgrelard so if I have a map of posts and I need to open the user profile dialog on click, then I need to add a dialog inside of each feedPost right?

{posts.map((post) => (
  <FeedPost key={post.id} {...post} />
))}
...
const FeedPost = () => <> ... <UserProfileModal userId={user.id} /> </>

[benoitgrelard]

Yes that would be the easiest way to do it @gabrielmlinassi.
Important to note there are no performance overhead in rendering multiple components like this as they are not opened and we don't do any logic until open.

[johnajunghans]

Thank you, @benoitgrelard, for your final comment about the absence of performance overhead in rendering multiple dialogs. This seems to be a massive misunderstanding online, as myself and many others are apparently tying ourselves in knots trying to remotely trigger RadixUI dialogs. I recently migrated to shad/cn from ChakraUI which uses hooks to remotely trigger dialogs; nice to have solutions that don't require component re-renders. Due to the recent rise in the popularity of shad/cn, this would be a great topic for a blog post.