Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: React Hook Form – Simple Form Validation

react-hook-form.com

Post reply on HN
Print view View original

21–30 of 75 posts

Re: Show HN: React Hook Form – Simple Form Validation

#21

Post by bluebill1049 »

latchkey wrote: post #12
bluebill1049 wrote: post #9

Earlier quoted context omitted.

By the way I did have a folder of examples as well. Quite lot of them: https://github.com/react-hook-form/react-hook-form/tree/mast... with codesandbox link too

Sure, I've seen examples, but that is different than what I'm talking about. I want components. =) For example, with react-final-form, I wrote a thin wrapper for Material-UI component (example [1]). While it didn't take me that long to do, it does have some weird edge cases that I had to google around for. It would be nice to not have to figure this stuff out with your framework too and would encourage me to try it o…

sounds good. i will be looking into that :)

Re: Show HN: React Hook Form – Simple Form Validation

#22

Post by softwarelimits »

I strongly recommend to automate form generation based on JSON schema what will enable zero coding for maintenance tasks like e.g. synchronization with model changes.

As form code is the most important entry point for security flaws in web applications it is also the most expensive and it is not a good idea having to touch production code for every little backend change. This looks like PHP coding 15 years ago. Do not do that.

Re: Show HN: React Hook Form – Simple Form Validation

#23

Post by chrisa »

11235813213455 wrote: post #13

I've never seen a benefit in storing a form state in react state, forms already hold a state in the DOM, you can read, update and validate it ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Fo... ) for example, after a form submit event, you can do const elements = [...e.target.elements].filter(el => el.name); // all form elements with a name // invoke onSubmit prop with form data: onSubmit( elements.redu…

Part of the point (from a React perspective) is that everything in a React UI is driven by the data - so your data (state) should always control the UI.

If you store some state in JS variables, and some in the DOM (forms), then that's not true anymore. That's not necessarily a problem if you're expecting it (uncontrolled components are a valid React paradigm) - but if you're expecting controlled components, but some of them aren't, then you can run into trouble.

Also, once you're used to controlled components, it actually feels like a hassle to keep the data in the DOM - you have to constantly be getting it from the DOM to do form validation, submitting, field resetting, etc.

Again - I would say that neither is more right or wrong; but it's more of a style choice.

Re: Show HN: React Hook Form – Simple Form Validation

#24

Post by bluebill1049 »

softwarelimits wrote: post #22

I strongly recommend to automate form generation based on JSON schema what will enable zero coding for maintenance tasks like e.g. synchronization with model changes. As form code is the most important entry point for security flaws in web applications it is also the most expensive and it is not a good idea having to touch production code for every little backend change. This looks like PHP coding 15 years ago. Do no…

everything is about pros and cons. there is no silver bullet for building form if you enjoy building a form with JSON schema good for you too. Thanks for checking it out tho :)

Re: Show HN: React Hook Form – Simple Form Validation

#25

Post by bluebill1049 »

chrisa wrote: post #23
11235813213455 wrote: post #13

I've never seen a benefit in storing a form state in react state, forms already hold a state in the DOM, you can read, update and validate it ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Fo... ) for example, after a form submit event, you can do const elements = [...e.target.elements].filter(el => el.name); // all form elements with a name // invoke onSubmit prop with form data: onSubmit( elements.redu…

Part of the point (from a React perspective) is that everything in a React UI is driven by the data - so your data (state) should always control the UI. If you store some state in JS variables, and some in the DOM (forms), then that's not true anymore. That's not necessarily a problem if you're expecting it (uncontrolled components are a valid React paradigm) - but if you're expecting controlled components, but some…

This is a really good reply! In fact, React hook form is based on uncontrolled components, I guess the mainstream is still controlled, but I would like to give some fo the love to uncontrolled and explore the benefits from it.

Re: Show HN: React Hook Form – Simple Form Validation

#26

Post by throwaway_bad »

softwarelimits wrote: post #22

I strongly recommend to automate form generation based on JSON schema what will enable zero coding for maintenance tasks like e.g. synchronization with model changes. As form code is the most important entry point for security flaws in web applications it is also the most expensive and it is not a good idea having to touch production code for every little backend change. This looks like PHP coding 15 years ago. Do no…

Can you point to a real world example of what you mean?

I think I have heard of something similar but it didn’t seem to have caught on in any major web frameworks that I know of (strongly typed json API server which generates runtime validators on frontend and backend). Even then most people want control over the presentation of the form and wouldn’t want to create fields from the schema (e.g. a number type is sometimes a slider and sometimes a drop down)

Re: Show HN: React Hook Form – Simple Form Validation

#27

Post by franciscop »

Hey author I like this! It's very close to what I use for simple forms, my library `forn`:

    import forn from 'forn';
    
    export default () => (
       console.log(data))}>
        
        
        Send!
      
    );
Test it: https://codesandbox.io/s/agitated-johnson-3hv96

Why do you need the register though? Is the hook needed to hold the refs? Is it only for compatibility with React Native or are there other reasons? With forn I use `e.target`, which should not be available in RN.

Re: Show HN: React Hook Form – Simple Form Validation

#28

Post by franciscop »

CGamesPlay wrote: post #15

This looks really good. But is there a non-hook version for use in class components? I'm imagining it might look like this: class MyForm extends React.Component { formState = new ReduxHookForm(); render() { const { register, handleSubmit } = this.formState; return ( male female ); } handleSubmit(data) { console.log(data); } }

I have a pure-javascript library that works like that, "forn". No hooks or any local state needed:

https://www.npmjs.com/package/forn

Re: Show HN: React Hook Form – Simple Form Validation

#29

Post by mickael-kerjean »

throwaway_bad wrote: post #26
softwarelimits wrote: post #22

I strongly recommend to automate form generation based on JSON schema what will enable zero coding for maintenance tasks like e.g. synchronization with model changes. As form code is the most important entry point for security flaws in web applications it is also the most expensive and it is not a good idea having to touch production code for every little backend change. This looks like PHP coding 15 years ago. Do no…

Can you point to a real world example of what you mean? I think I have heard of something similar but it didn’t seem to have caught on in any major web frameworks that I know of (strongly typed json API server which generates runtime validators on frontend and backend). Even then most people want control over the presentation of the form and wouldn’t want to create fields from the schema (e.g. a number type is someti…

There's a few people trying to build libraries (https://github.com/rjsf-team/react-jsonschema-form) but there ain't any magic bullet. For this project (https://github.com/mickael-kerjean/filestash), I built my very own as no other library would work for what I wanted

Re: Show HN: React Hook Form – Simple Form Validation

#30

Post by bluebill1049 »

franciscop wrote: post #27

Hey author I like this! It's very close to what I use for simple forms, my library `forn`: import forn from 'forn'; export default () => ( console.log(data))}> Send! ); Test it: https://codesandbox.io/s/agitated-johnson-3hv96 Why do you need the register though? Is the hook needed to hold the refs? Is it only for compatibility with React Native or are there other reasons? With forn I use `e.target`, which should not…

hey, nice lib you got there :) When I was deciding the API, I did have the idea of just collecting form input automatically (similar to forn), but there are few reasons which lead to the final decision:

1. Support React controlled component. eg some of the popular component libs, they are wrapped input inside their component and it's hard to predict which to include during the form submit.

2. React Native 3. Attach validation rules, messages and async validation on the individual field level.

Post reply on HN