Beier Luo
Beier Luo
  • Видео 25
  • Просмотров 1 282 582
BEEKAI
BEEKAI: www.beekai.com
Craft beautiful online form experiences.
You can now build form applications with simple, interactive visual flow diagrams. Requires no coding and is built with the best-in-class user experience.
Просмотров: 2 489

Видео

React Hook Form - useFieldArray
Просмотров 81 тыс.2 года назад
In this session, we are taking a look at the useFieldArray custom hook to manage your dynamic form fields. working example: codesandbox.io/s/usefieldarray-llp6lw
Progressively improve form
Просмотров 7 тыс.2 года назад
From native constrained API to React Hook Form.
React Europe conference 2021: Enhances forms with developer experience and user experience
Просмотров 26 тыс.2 года назад
My 2021 React Europe conference 2021 talk
React Hook Form - Get Started
Просмотров 254 тыс.2 года назад
React Hook Form - Get Started
React Hook Form - useForm: unregister
Просмотров 15 тыс.2 года назад
This session cover unregister API inside react hook form. Doc: react-hook-form.com/api/useform/unregister
React Hook Form - useForm: resetField
Просмотров 16 тыс.2 года назад
This session cover resetField API inside react hook form. Doc: react-hook-form.com/api/useform/resetField
react hook form - useForm: handleSubmit
Просмотров 43 тыс.2 года назад
This session cover handleSubmit API inside react hook form. Doc: react-hook-form.com/api/handleSubmit
React Hook Form - useForm: setError
Просмотров 38 тыс.2 года назад
This session cover setError API inside react hook form. Doc: react-hook-form.com/api/useform/setError
React Hook Form - useForm: trigger
Просмотров 39 тыс.2 года назад
This session cover trigger API inside react hook form. Doc: react-hook-form.com/api/useform/trigger
React Hook Form - useForm: reset
Просмотров 50 тыс.2 года назад
This session cover reset API inside react hook form. Doc: react-hook-form.com/api/useform/reset
React Hook Form - useForm: setValue
Просмотров 54 тыс.2 года назад
This session cover setValue API inside react hook form. Doc: react-hook-form.com/api/useform/setValue
React Hook Form - useForm: formState
Просмотров 37 тыс.2 года назад
This session cover formState API inside react hook form. Doc: react-hook-form.com/api/useform/formstate
React Hook Form - useForm: watch
Просмотров 82 тыс.2 года назад
This session cover register API inside react hook form. Doc: react-hook-form.com/api/useform/watch
React Hook Form - useForm: register
Просмотров 58 тыс.2 года назад
This session cover register API inside react hook form. Doc: react-hook-form.com/api/useform/register Codesandbox: codesandbox.io/s/useform-register-cnmwf
React Hook Form - Controller
Просмотров 94 тыс.3 года назад
React Hook Form - Controller
React Hook Form V7 - Get Started
Просмотров 92 тыс.3 года назад
React Hook Form V7 - Get Started
React Hook Form V7 (Preview)
Просмотров 7 тыс.3 года назад
React Hook Form V7 (Preview)
V6 - React Hook Form - Controller (Extend functionalities)
Просмотров 21 тыс.4 года назад
V6 - React Hook Form - Controller (Extend functionalities)
V6 - React Hook Form - building dynamic form (Field Array)
Просмотров 34 тыс.4 года назад
V6 - React Hook Form - building dynamic form (Field Array)
V6 - React Hook Form - React Native form validation
Просмотров 17 тыс.4 года назад
V6 - React Hook Form - React Native form validation
V6 - React Hook Form - V6 Preview
Просмотров 2,9 тыс.4 года назад
V6 - React Hook Form - V6 Preview
V6 - React Hook Form - persist multiple steps forms (Form Wizard)
Просмотров 49 тыс.4 года назад
V6 - React Hook Form - persist multiple steps forms (Form Wizard)
V6 - React Hook Form - custom hook for forms validation
Просмотров 80 тыс.5 лет назад
V6 - React Hook Form - custom hook for forms validation

Комментарии

  • @ReneRowelldelaRama
    @ReneRowelldelaRama 4 дня назад

    Im confused on the useEffect not recommending to use watched values as dependencies. From what I understood is that it is unnecessary because watch already do the rerendering. What I dont understand is when you said at 9:44, that watch is meant to be used inside the render, rather than inside the useEffect. Can you please explain on what this is? Thank you!

  • @tomasburian6550
    @tomasburian6550 Месяц назад

    Do you guys have a guide for other types of inputs? It's quite frustrating everyone just shows a simple text field while the most of us in the field have to deal with selects and others. I'm having problems with using Controller with MUI components and there's little to go on.

  • @rakibulhashanrabbi
    @rakibulhashanrabbi Месяц назад

    Amazing!

  • @mohamedmaher2981
    @mohamedmaher2981 2 месяца назад

    trigger not validate zod refine why

  • @DigitalScorp
    @DigitalScorp 2 месяца назад

    Really nice video - thank you very much for sharing XD

  • @akshaychavan5511
    @akshaychavan5511 2 месяца назад

    You're the best!

  • @袁潤江
    @袁潤江 3 месяца назад

    I need to store objects removed from useFieldArray remove method to another array for subsequent use. How can I achieve this?

  • @z44-huynhkhangvy52
    @z44-huynhkhangvy52 3 месяца назад

    Is it required with array of objects sir? I wanna use array of string instead, but typescript warns me with append("")

    • @incognito14x2
      @incognito14x2 2 месяца назад

      zdid you find the solution? typescript complains about typing

    • @z44-huynhkhangvy52
      @z44-huynhkhangvy52 2 месяца назад

      @@incognito14x2 yeah bro, just do this : const { append, remove, fields } = useFieldArray({ control: form.control, name: "skills" as never, }); and append("")

  • @abdallahazme4757
    @abdallahazme4757 3 месяца назад

    Thank you so much. What do you think of merge zod library with react hook form? or is the validation of register function is enough for most forms?

  • @cloudsss83
    @cloudsss83 3 месяца назад

    amazing stuff... i'm creating a form that it is supposed to be loaded with server data, and it allows users to update this data. The summary at the end that needs only the changed fields is giving me a headache, but your videos are helping me a lot. Thanks!

  •  3 месяца назад

    Pertect

  • @aulyaaryansyah6974
    @aulyaaryansyah6974 4 месяца назад

    thanks man

  • @JacquesOscarNdjebayiMatike
    @JacquesOscarNdjebayiMatike 4 месяца назад

    Is this playlist still usefull with latest version on react hook form in june 2024 ?

  • @thebocksters2756
    @thebocksters2756 4 месяца назад

    I can't hear u man, increase ur mice

  • @LinhVu-wz5nq
    @LinhVu-wz5nq 4 месяца назад

    Thank you

  • @notoreofreakshake
    @notoreofreakshake 4 месяца назад

    hello, can i use this in a controller

  • @JoePrivett-cr5np
    @JoePrivett-cr5np 5 месяцев назад

    Is there another video that differentiates between the custom errors (non-registered field) and the use of the 'root.' prefix in the error name? It's really not clear from the docs why you wouldn't just always use the use custom error mechanism.

  • @longnq3
    @longnq3 5 месяцев назад

    Thanks for sharing

  • @ab_semi
    @ab_semi 5 месяцев назад

    Hello, thank you for the video. I have a question though: I want to have a language set with three select fields with options: first is "Language", second is "Oral Skill for this language" and "Writing skill for this language". However, I want initially only "language" field to appear, and only after selecting a language (i.e. giving it value), I want two other fields to appear. And the append button should become disabled as soon as I added a language, until we selected all three selects. N.B. I can not use onChange or OnValueChange functions. Does it still work because of watch?

  • @JoshuaMusau
    @JoshuaMusau 6 месяцев назад

    I'm about to cry!

  • @guderi8533
    @guderi8533 6 месяцев назад

    ty ^^

  • @calvinwilliams729
    @calvinwilliams729 6 месяцев назад

    It is very helpful but this is advance video

  • @spa.3239
    @spa.3239 6 месяцев назад

    Accurate closed captions would be appreciated

  • @joshuadadula-fy5kn
    @joshuadadula-fy5kn 6 месяцев назад

    Form is a critical component we can develop, i suggest we create our own component rather than trusting somebody's tool, so many alternative we can copy this feature

  • @sahilbaig9860
    @sahilbaig9860 6 месяцев назад

    🙏🙏🙏🙏

  • @aboutajedyneayoub921
    @aboutajedyneayoub921 7 месяцев назад

    "as" prop is deleted from v7 ? why ?

  • @kev11n_eleven
    @kev11n_eleven 7 месяцев назад

    This was super helpful and well explained - thanks for the demonstration!

    • @bluebill1049
      @bluebill1049 7 месяцев назад

      Super glad, we have a new feature coming for the next release that allows you to subscribe formstate outside of React. Stay tuned.

  • @VaurionX
    @VaurionX 7 месяцев назад

    Great tutorial. There is so much functionality within this library that I keep discovering!

  • @mohammedsabir4632
    @mohammedsabir4632 7 месяцев назад

    how can we set action

  • @raphael.portela
    @raphael.portela 8 месяцев назад

    can you do an example of a complex form that has update and a lot of select values that comes from gql quries? im really lost, im using controller but i think i need something more

  • @djb16009
    @djb16009 8 месяцев назад

    Thanks so much Bill. This video solved my issue with a more complex component wrapped in a Controller and passing the value through to ZodResolver as a Number instead of String. Was tearing my hair out before finding this!

  • @omnilothar
    @omnilothar 9 месяцев назад

    what is the type of data from handlesubmit callback?

    • @omnilothar
      @omnilothar 9 месяцев назад

      nvm, its `SubmitHandler<FieldValues>`

  • @shattereddnb3268
    @shattereddnb3268 9 месяцев назад

    I´m using a button to submit to prevent submitting on enter key, but it seems like React Hook Form is still reloading the page, and since I´m just using an onClick event I can´t prevent defaults on it to stop the reload. Any tips?

  • @jaydeeppatil7936
    @jaydeeppatil7936 10 месяцев назад

    Idk why people don't watch these videos instead of going to some random youtubers Thanks a lot for these awesome tutorials

    • @paulp3053
      @paulp3053 7 месяцев назад

      because they have better microphones?

  • @harrisonwell1719
    @harrisonwell1719 10 месяцев назад

    How to calculate the total for each item if I have a quantity field? Thanks

  • @harrisonwell1719
    @harrisonwell1719 10 месяцев назад

    I have a quantity field and price field how to multiply them in a total field? Thanks

  • @NARAYANSHARMA-mc1bb
    @NARAYANSHARMA-mc1bb 11 месяцев назад

    Hello Sir, can we make name field will be unique when user try to submit then get error like name field should be unique on particular field.

  • @MarcinMichalik-o5i
    @MarcinMichalik-o5i 11 месяцев назад

    why the codesandbox does not work?

  • @catem8752
    @catem8752 11 месяцев назад

    The speaker should improve on his sound quality. You sound muffled and unenthusiastic. I've had to keep on replaying some parts because the words are getting lost in the muffled sound. For such a popular dev tool, the speaker should speak as though he actually wants to give the tutorial.

  • @usf4886
    @usf4886 11 месяцев назад

    4:20 without changing `onChnge:props.onChange` to `onChange: (e)=> props.onChange({target:{name, value:e.target.value})` the form submission functionality doesn't work properly, I test it, but while the `e` object have the target property with same values for `name` and `value` why `onChage:props.onChange` doesn't work? (I see that if we have ability for dirctlly spreading `register` return properties on a HTML input element some how because of passed `ref` the calling onChange(e) does the job, but ...)

  • @noname13345
    @noname13345 11 месяцев назад

    You sir are great. Thankyou for this awesome library.

  • @rsbah
    @rsbah 11 месяцев назад

    volume soooo low 😥 but ty for the tutorial

  • @JavaxTv
    @JavaxTv 11 месяцев назад

    I could make the setValue works with an onChange inside the register method, and the input is correct visually with the new setValue, however, when I submit the data seems one state before my onChange setValue function. Im trying to understand but cant find the reason. also tried the setValueAs: v => {...}, the value on the v argument is correct when I do a console.log, but when I return v and also do a submit, the data again seems one state before my onChange any reasons? thanks

  • @sharkofjoy
    @sharkofjoy Год назад

    I can't get past 30 seconds into this tutorial. I started a new React + vite app, added a single "form" component with two inputs, and as soon as I try to use the useForm hook, my console is full of errors. I have nothing else in this app, but it says I have invalid hook call and dispatcher is null. I have no way of understanding these errors in context or debugging them. I dunno what to do when I can't follow the very first step of the tutorial

  • @Zeraltz
    @Zeraltz Год назад

    Goddamn this is easy to do and easy to understand, thanks a lot!

  • @forsh2966
    @forsh2966 Год назад

    what a gigachad, i love it so much! handle every basic usecase <3

  • @masonnash9396
    @masonnash9396 Год назад

    Thanks for putting the time into making these great guides. I keep coming back to them!

  • @amitkaktwan
    @amitkaktwan Год назад

    loved the way you describe things here.

  • @pinkrosemoli
    @pinkrosemoli Год назад

    Hello, I saw that this is working if you register fields with standard method register. But how can i do it with controllers?

  • @migueljara9399
    @migueljara9399 Год назад

    Wonderful product! Just wondering, are there any plans on making this an open source product that people can self-host? It'd be amazing to have alternatives to things such as SurveyJS!

    • @bluebill1049
      @bluebill1049 Год назад

      Yes, definitely! Just need more time to make it open-sourced.

    • @migueljara9399
      @migueljara9399 Год назад

      @@bluebill1049 Amazing! Really looking forward to that!