Unable to access Modal context

[omarnyte]

👋! I'm trying to access Modal's context using useContext(ModalContext), but the hook always returns null. I'm calling useContext from a child component rendered by Modal, and I can see the Modal context provider wrapping the child if I inspect with the React developer tools. I've also confirmed that there are not multiple versions of react-aria-components installed in my service. Is this is a bug, or is there a different way I should access the context?

I'd like access to the context in order to conditionally render a close button if isDismissable is true on Modal. Without access to the context, that requires passing isDismissable to both of my reusable Modal and Dialog components. I'd prefer to expose the prop in just one component for a cleaner API.

Here's a quick snippet and a code sandbox.

const ReusableModal = ({ isDismissable ) => (
  <DialogTrigger>
    <Button>Sign up…</Button>
    <Modal isDismissable={isDismissable}>
      {children}
    </Modal>
  </DialogTrigger>
);

const ReusableDialog = () => {
  const context = useContext(ModalContext); // returns null
  console.log("context", context); 

  return (
    <Dialog>
      {({ close }) => (
        <form>
          <Heading slot="title">Sign up</Heading>
          <TextField autoFocus>
            <Label>First Name:</Label>
            <Input />
          </TextField>
          <TextField>
            <Label>Last Name:</Label>
            <Input />
          </TextField>
          <Button onPress={close}>Submit</Button>
        </form>
      )}
    </Dialog>
  );
};

<ReusableModal isDismissable>
  <ReusableDialog />
</ReusableModal>

[snowystinger]

is one of them importing somehow the cjs vs module vs main file instead? that can be another way to have "duplicates".
you can place a console log in each of them in node_modules to see if multiple types are being loaded.

[omarnyte]

Thanks for the quick follow-up! I placed console logs inside all three Modal dist files, and my service is only using Modal.mjs.

Can you confirm if I'm using ModalContext as intended? The docs mention using ModalContext as a way to send props down to React Aria Components to "build your own compositional APIs similar to those found in React Aria Components itself". I'm not trying to send props to Modal. Instead, I'm trying to access Modal's isDismissable prop from within a component rendered by Modal.

Looking at the Modal source code, only InternalModalContext gets passed through the provider (that's the context I was seeing in the React Developer Tools). I haven't wrapped any of my components in a ModalContext.Provider, so it makes sense that useContext(ModalContext) always returns the default value of null. But I'm not sure if being unable to access the context is a bug or intentional behavior.

[omarnyte]

I talked myself into a solution. If my reusable Modal component renders a ModalContext.Provider with isDismissable in the value, isDismissable gets passed to RAC Modal, and any child components can access that value with useContext(ModalContext). So my snippet ends up looking like this:

const ReusableModal = ({ isDismissable ) => (
  <ModalContext.Provider value={{ isDismissable }}>
    <DialogTrigger>
      <Button>Sign up…</Button>
      <Modal> // no longer need to pass isDismissable
        {children}
      </Modal>
    </DialogTrigger>
  </ModalContext.Provider>  

);

const ReusableDialog = () => {
  const context = useContext(ModalContext); // now returns { isDismissable: true }
  console.log("context", context); 

  return (
    <Dialog>
      {({ close }) => (
        <form>
          <Heading slot="title">Sign up</Heading>
          <TextField autoFocus>
            <Label>First Name:</Label>
            <Input />
          </TextField>
          <TextField>
            <Label>Last Name:</Label>
            <Input />
          </TextField>
          <Button onPress={close}>Submit</Button>
        </form>
      )}
    </Dialog>
  );
};

<ReusableModal isDismissable>
  <ReusableDialog />
</ReusableModal>

It would be nice to be able to access the full ModalContext the same way that we can access the state context of certain components (like ComboBoxStateContext), but this workarounds gives me what I need!