v7.0.0

Middleware mode

From v7 you can use middleware to extract the form data and access it anywhere in your actions and loaders.
All you have to do is set it up in your root.tsx file like this:

import { unstable_extractFormDataMiddleware } from "remix-hook-form/middleware";

export const unstable_middleware = [unstable_extractFormDataMiddleware()];

And then access it in your actions and loaders like this:

import { getFormData, getValidatedFormData } from "remix-hook-form/middleware";

export const loader = async ({ context }: LoaderFunctionArgs) => {
  const searchParamsFormData = await getFormData(context); 
  return { result: "success" };
};
export const action = async ({ context }: ActionFunctionArgs) => {
  // OR:   const formData = await getFormData(context); 
  const { data, errors, receivedValues } = await getValidatedFormData<FormData>(
    context,
    resolver,
  );
  if (errors) {
    return { errors, receivedValues };
  } 
  return { result: "success" };
};

What's Changed

• Update Readme code examples to align with React Router 7 by @LeoDanielsson in #163

New Contributors

• @LeoDanielsson made their first contribution in #163

Full Changelog: v6.2.0...v7.0.0