mantine form values ​​generic types

[ryuhangyeong]

https://mantine.dev/form/use-form/#useformreturntype

In my requirements, I need to receive various form types from the component.

For this purpose, we used the generic method below. Type cannot be inferred.

Could you please help?

Examples

// hooks/use-test-form.ts
import { useForm } from "@mantine/form";

export type UseTestFormValues = {
  name: string;
  age: number;
};

export const useTestForm = () => {
  const form = useForm<UseTestFormValues>({
    initialValues: {
      name: "",
      age: 0,
    },
  });

  return {
    form,
  };
};

// App.tsx
import Test from "./components/Test";
import { useTestForm, UseTestFormValues } from "./hooks/use-test-form";

const App = () => {
  const { form } = useTestForm();

  return (
    <div>
      <Test<UseTestFormValues> form={form} />
    </div>
  );
};

export default App;

// components/Test.tsx
import { UseFormReturnType } from "@mantine/form";

type TestProps<T> = {
  form: UseFormReturnType<T>;
};

const Test = <T,>({ form }: TestProps<T>) => {
  console.log(form.values.name); // **type error**

  return <div>hello world</div>;
};

export default Test;

[ryuhangyeong]

import { UseFormReturnType } from "@mantine/form";

type TestProps<T> = {
  form: UseFormReturnType<T>;
};

const Test = <T extends Record<string, PropertyKey>>({
  form,
}: TestProps<T>) => {
  console.log(form.values.name);

  return <div>hello world</div>;
};

export default Test

I found this method...it's not good