Form handling in re-frame in 2018?

clojurescript

#1

Hi folks, I’m hoping people could point me at good recent resources or examples on handling forms with re-frame. My googling is turning up a lot of small projects, most of which look like abandonware from a few years ago, so I’m not sure what the state of the art is for doing this nicely nowadays. All input much appreciated!


#2

Hey, good timing, we’re cleaning up the form lib we use in conjunction with re-frame and it’ll be up for public consumption between now and mid next week. It’s API is modeled after the venerable redux form over in JS land, I was surprised that no form state management library existed for re-frame. I can update this thread when the library goes live, but it’ll do what you need.


#3

Great, please do! I look forward to checking it out.


#4

Have you looked at reagent-forms?


#5

Thanks, I’ll take a look through it. Anything one should do differently if using it with re-frame instead of plain reagent?


#6

It has a portion bout reframe on its front-page readme. I haven’t tried it.


#7

I’ve tried https://github.com/pupeno/free-form for a toy re-frame project. Seems to work, but I don’t have large scale experience with it.


#8

Hi. I use this: https://github.com/imatic/re-frame-form on a few small projects. It doesn’t do much though. It’s just set of some handlers, subs…

Simple example can be found here: https://github.com/imatic/re-frame-form/blob/e4f2ca430dc83e3e9d78402c4dddee3a8ddb9480/examples/re-frame-form/src/example/core.cljs#L39 (you can see it live here: https://imatic.github.io/re-frame-form/#!/example.core).

A bit better example is here: https://github.com/nenadalm/Warehouse/blob/721b17f24cc545e44a5bbb101d69f13f203a339e/frontend/src/warehouse/pages/list/views.cljs#L12
The idea is that each project has it’s own form namespace that integrates the library with any ui library. Form namespace of liked project: https://github.com/nenadalm/Warehouse/blob/721b17f24cc545e44a5bbb101d69f13f203a339e/frontend/src/warehouse/form.cljs#L1 (it uses no ui library).

I created that because at work we use Material-UI and a few existing re-frame libraries I checked didn’t work well with it (in material-ui, you have input that has a few props related to state of the input (label, has error?, error label, …) and that seemed to be a problem usually - e.g. for mentioned reagent-forms: https://github.com/reagent-project/reagent-forms/issues/137.


#9

Library launched here: https://github.com/workframers/duff Let me know if you have any questions


#10

thanks for the tips everyone, lots to check out.