Access context from children component

[k11q]

Hi is it possible to access the context from children component, e.g. the open state of the Dialog component, from the Dialog.Content component, is that possible?

[jjenzz]

Radix components all provide a controlled API to share state:

const [open, setOpen] = React.useState(false);

return (
  <Dialog.Root open={open} onOpenChange={setOpen}>
    <Dialog.Content>
      {/* now child parts can have access to its state */}
      {open ? 'open' : null}
    </Dialog.Content>
  </Dialog.Root>
);

this behaves much like the way you would share <input /> state with other components:

const [value, setValue] = React.useState('');

return (
  <>
    <input value={value} onChange={e => setValue(e.currentTarget.value)} />
    {/* share value with another component */}
    <SomethingElse inputValue={value} />
  </>
);