useFormContext in custom components

[foresttoney]

It looks like react-elements is built on react-hook-form. Given that node overrides are rendered in the form context, shouldn't we be able to get the form context in our node override function?

import { type OryNodeInputProps } from "@ory/elements-react";
import { useFormContext } from "react-hook-form";

export function NodeInput({ attributes, node, ...props }: OryNodeInputProps) {
  const formContext = useFormContext();
  console.log(":: formContext ::", formContext);

  return (
    <div>implementation</div>
  );
}

[aeneasr]

We might remove react-hook-form in the future due to several issues so it is possible but may work differently in the future

[jonas-jonas]

To answer your question, this is likely a limitation of React context, and due to the fact that we pin the react-hook-form dependency to 7.56.1. @ory/elements-react pulls in that specific version of the library, while you likely have a different version specified in your project.

We can most likely relax the version constraint, though. What's your use case?

[foresttoney]

I am really struggling to wrangle the Kratos UI eDSL. It sounds like react-elements is more or less the prescriptive way to build a custom interface (via providing component overrides to the flow type components). I have a series of custom form primitive components (Input, PhoneNumber etc) that I want to build my interface from. I can actually render the component but don't have access to the underlining react-hook-form functions to update state on change.

@aeneasr I hear you on wanting to keep react-hook-form an implementation detail.