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

11–20 of 75 posts

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

#11

Post by bluebill1049 »

helb wrote: post #10
bluebill1049 wrote: post #2

Hi guys, I have built a custom hook for form validation, please check it out and feedback welcome <3

I've been playing with it for the past ~40 minutes and i really like it. Can't wait to use it on a real project soon. In fact, i might start converting some older things to it in spare time. The website and docs are absolutely amazing, best i've seen in a long time. Thank you for doing this!

Thank you so much for those kind words. This means so much to me seriously. I love making things and especially when others are enjoy to use. I will keep improving the site and package. Feel free to ask questions in github :) again thank you <3

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

#12

Post by latchkey »

bluebill1049 wrote: post #9
latchkey wrote: post #7

Earlier quoted context omitted.

Great thanks. One other helpful thing would be to start a project full of pre-wrapped components for various frameworks. It would be lovely to just yarn add something that would give me Material-UI components already set up. I'm sure others would love a Bootstrap version... etc. The more you can lower the barriers to entry, the better.

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 out more quickly.

I know that formik and redux-forms are popular, but react-final-form and your framework seem to have a lot of overlap. Both seem to be pretty well done.

[1] https://gist.github.com/lookfirst/558fb2161fd633c7eaab412b85...

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

#13

Post by 11235813213455 »

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.reduce((o, el) => ({
      ...o,
      [el.name]: el.type==='checkbox' ? el.checked : el.value
    }), {})
  );

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

#14

Post by bluebill1049 »

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…

That’s it! React hook form is basically doing that :) it’s uncontrolled.

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

#15

Post by CGamesPlay »

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);
      }
    }

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

#16

Post by bluebill1049 »

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); } }

yea would be similar for class component :)

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

#17

Post by bluebill1049 »

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…

import React from 'react'; import useForm from 'react-hook-form';

function App() {

  const { register, handleSubmit, errors } = useForm(); // initialise the hook

  const onSubmit = data => {
    console.log(data);
  };

  return (
    
       {/* register an input */}
      
      
      {errors.lastname && 'Last name is required.'}
      
      
      {errors.age && 'Please enter number for age.'}
      
      
    
  );
}

here is an code example, there is no local state.

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

#18

Post by CGamesPlay »

bluebill1049 wrote: post #16
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); } }

yea would be similar for class component :)

Sorry I don't understand. Last time I checked, hooks are not usable from class components. How can I use react-hook-form from a class component?

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

#19

Post by bluebill1049 »

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 haven't got a plan to look into class component just yet, but will do in the near future.

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

#20

Post by bluebill1049 »

CGamesPlay wrote: post #18
bluebill1049 wrote: post #16

Earlier quoted context omitted.

yea would be similar for class component :)

Sorry I don't understand. Last time I checked, hooks are not usable from class components. How can I use react-hook-form from a class component?

Sorry I meant once I made it work, and it will be the syntax
Post reply on HN