Can we use this library with react-router as well?

[MAST1999]

Sorry to open this as an issue, wanted to ask this in a discussion but couldn't find the tab.
I'm trying to use react-router and react-hook-form together and I was looking for how to do it and I ended up here.

Since Remix is built on react-router is it possible to use it there as well?

[AlemTuzlak]

@MAST1999 First of all thank you for the question. I just created discussions for this package and transfered your issue. To answer your question, here is the following information for you to understand how this can work with the react-router and some caveats that I plan to actually fix in the future.
As you might already know react-router introduced their new createBrowserRouter which is probably why you ask this question.

How it works

Before I answer this let me explain how this package works:

• It imports 2 dependencies from @remix-run/react, mainly the two being useSubmit and useActionData. Both of these are re-exported from react-router-dom, which means that this package is technically NOT really tied in with Remix but rather react-router instead.
• These dependencies are used to fetch the response data from an action and submit to an action/loader.
• The backend methods used in the actions and loaders are not tied in ANY way to remix and are just standard JS stuff which means that they can be used in non-remix code too.

Can it be used outside of Remix?

Alright, so what does that mean for you and can you use it in non-remix apps? The answer is YES, as long as you're using react-router and react-router-dom with the createBrowserRouter from above you will be able to leverage this package to its full extent.

Caveats

The only issue at the moment is that there is a peer dependency on @remix-run/react. Before I answered this question I tested this package in a Remix app by importing the dependencies directly from react-router-dom instead of that package and it worked fine. I plan to test out this scenario on production code to make sure it works in production Remix apps and if it does the dependency will be converted to react-router-dom and it will not be tied to remix in any way.

But for now unfortunately you will probably have to install @remix-run/react along your dependencies to make it work with react-router

TL;DR

Yes but until the next version release you will probably have to install @remix-run/react to make it work

[triemstr]

This may due to me using react-router 7 which is still in an early state, but whether I use the latest depoulo or forge42dev 5.1.1, I receive the following:

node_modules/react-router-dom/dist/index.js:13:101: ERROR: No matching export in "node_modules/react-router/dist/index.mjs" for import "UNSAFE_useRoutesImpl"
node_modules/react-router-dom/dist/index.js:13:213: ERROR: No matching export in "node_modules/react-router/dist/index.mjs" for import "UNSAFE_useRouteId"
node_modules/react-router-dom/dist/index.js:14:9: ERROR: No matching export in "node_modules/react-router/dist/index.mjs" for import "AbortedDeferredError"
node_modules/react-router-dom/dist/index.js:14:237: ERROR: No matching export in "node_modules/react-router/dist/index.mjs" for import "UNSAFE_useRouteId"
node_modules/react-router-dom/dist/index.js:14:340: ERROR: No matching export in "node_modules/react-router/dist/index.mjs" for import "defer"```

[depoulo]

@triemstr yeah that's very likely. Once v7 is out, I'll consider rebasing my fork, or, if remix-hook-form turns out to be unmaintained, investigate into using react-hook-form directly without it.

[AlemTuzlak]

I will drop remix support in favor of react router v7 as soon as a stable release is out

[depoulo]

Stable release it out 🎉
I've rebased my fork meanwhile: https://github.com/depoulo/remix-hook-form/tree/5.1.1-react-router-v7

[AlemTuzlak]

added support for rr7!
https://github.com/forge42dev/remix-hook-form/releases/tag/v6.0.0

[AlemTuzlak]

Support for react router is here!
https://github.com/forge42dev/remix-hook-form/releases/tag/v6.0.0