Comments (4)
Hey @mschipperheyn , this is a very specific question and would require some research.
But you can take advantage of the frontside of remix-forms if you make your backend comply the same contract as performFormAction. So you basically just need to return the same structure from back-end.
from remix-forms.
Actually, now that I read it again, I think @gustavoguichard was referring to number 3 :)
from remix-forms.
I cannot put any requirements on the backend. The backend is effectively a graphql api.
So, I would like to just send a request and process the return client side. From what you said I'm not 100% sure if I can use remix-forms purely client side, which I guess is my real question. Would I be able to customize the functionality in such a way that I can replace the component that interacts with the server through our own api and intercept the requests and responses so that it adheres to the contract with other components from remix-forms? Or would I just be better off with something like Formik or React Final Form?
from remix-forms.
Hey, @mschipperheyn!
-
You can use Remix Forms purely on the client side if you use React Router 6.4+ data APIs. With them, your actions will run on the client.
-
You can also have a Remix app as a Backend-For-Frontend that will communicate with your GraphQL backend from server to server. If that's a possibility, I think it's the best approach.
-
You can use only the
Form
side of Remix Forms and never useformAction
. If you pass anaction
prop to the form that points to a server that knows how to receiveapplication/x-www-form-urlencoded
requests, you can go nuts. Just remember that you'll have to manually return errors in the same format as formAction returns if you want to render server-side error messages. I would not recommend this approach, but it is a possibility. -
There is also a fourth possibility, which is what @gustavoguichard was referring to in his comment. In theory, you can use Remix Forms with any framework, as long as you:
- Create the following components/hooks using the same interface as Remix/React Router: Form, useActionData, useSubmit, and useNavigation.
- Create the following functions with the same interface as Remix/React Router: redirect, and json.
Remix Forms was not created to be used with other frameworks, though. This possibility is a side-effect of us making it work both with Remix and React Router in the same package. Leverage it at your risk :)
from remix-forms.
Related Issues (20)
- Inconsistent display of selected option in select control HOT 4
- Custom Component typings HOT 2
- Error: Cannot submit element that is not <form>, <button>, or <input type="submit|image"> HOT 1
- Multiple Checkboxes HOT 3
- Define Input type through fieldTypes HOT 5
- Bring `errorMessagesForSchema` from `domain-functions` to this library HOT 1
- form with mode="onChange" button flashes when it hydrates HOT 2
- Could not resolve "@deepkit/type" HOT 3
- Overriding fields HOT 2
- <Field hidden /> is not passing `type="hidden"` to its input
- Validation error not shown when field is an array
- Can't trigger onSubmit from Form-component HOT 6
- Handle `z.object` HOT 1
- Zod schema array of objects HOT 1
- Remix forms site example no longer maintained? HOT 1
- [BUG] Field error(s) not showing if using additional component HOT 1
- Input ID's not always unique when multiple forms are rendered
- Example of how to do crud correctly?
- How to add a reset button on the side of the submit button?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix-forms.