[Dialog] How to get the "open" state of an uncontrolled component?

[joonassandell]

What is the recommended way/is there a way to get the "open" state of an uncontrolled Dialog?

I'm building a custom Dialog component and animating it with framer-motion. I've left out unnecessary parts of the code to simplify this discussion. I've extracted each part of the Dialog in our Design System library like so:

// DialogRoot.tsx
import { Root } from '@radix-ui/react-dialog';

export const DialogRoot: FC<DialogRootProps> = ({ children, ...props }) => {
  return (
    <Root {...props}>
      {children}
    </Root>
  );
}

// DialogContent.tsx
import { Content } from '@radix-ui/react-dialog';
import { AnimatePresence, motion } from 'framer-motion';

export const DialogContent: FC<DialogContentProps> = ({ children, ...props }) => {
  return (
    <AnimatePresence>
      {open && (
        <Portal forceMount>
          <Content asChild {...props}>
            <motion.div {...variants}>
              {children}
            </motion.div>
          </Content>
        </Portal>
      )}
    </AnimatePresence>
  );
}

// MyComponent.tsx (usage in a consuming project) 
import { DialogRoot, DialogContent, DialogTrigger } from '@lib/Dialog';

const MyComponent: FC = () => {
  return (
    <DialogRoot>
      <DialogContent>
        My content
      </DialogContent>
      <DialogTrigger>Trigger dialog</DialogTrigger>
    </DialogRoot>
  );
};

So, my question is that how can I get than open boolean value in DialogContent.tsx? Is it possible to get the Dialog context somehow?

---

If the answer is that I need to control the state (w/ const [open, setOpen] = useState(false); applied to <DialogRoot open={open} onOpenChange={setOpen}>), then how can I get that open prop in DialogContent.tsx without having to apply the open prop to it as well? This question is more to how this component should be structured.

Working solutions I've tried:

1. With controlled component: Combine DialogRoot.tsx and DialogContent.tsx and apply prop for the trigger component to isolate it from the animated contents:

// MyComponentControlled.tsx (usage in a consuming project)
import { Dialog, DialogTrigger } from '@lib/Dialog';

const MyComponentControlled: FC = () => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen} trigger={<DialogTrigger>Trigger dialog</DialogTrigger>}>
      Content
    </Dialog>
  );
};

2. With controlled component: In DialogRoot.tsx, filter children (React.children) based on DisplayName etc. and clone (React.cloneElement) the filtered child (<DialogContent>) by passing the open property to it.
3. Create new React context

But what I would really like to achieve is the structure like in MyComponent.tsx with or without controlling the open state and without applying additional props to any subcomponents. The above solutions feel like workarounds. I'm trying to keep things simple. :)

Thank you, radix-ui is awesome!

[benoitgrelard]

Hey @joonassandell,

There are many ways to achieve the same result.
The core answer is that you can't access the state when uncontrolled, that's what the controlled API is there for.
On top of that, you're already having to control it anyway if you want to animate with JS libraries (framer motion in your case).

Whichever way you pass your props around is really up to you, I wouldn't say any of the solutions you proposed are workarounds.