- Регистрация
- 1 Мар 2015
- Сообщения
- 1,826
- Баллы
- 155
In my projects, I often prefer using the trio of MUI, RHF, and ZOD/YUP. Why, you ask? Because there’s something appealing about starting a new project every other day and never looking at it again.
So, when kicking off a new project, here are my steps:
However, I’ve noticed that when using RHF — especially with the Controller— the code tends to get lengthy. For instance, let’s look at this Autocomplete code block:
Just to display a few cities in a fancy searchable dropdown, we ended up writing 29 lines of code. To avoid having to revisit code that slows down my flow, I created RHF-compatible form components with TypeScript-supported generic types. Now, let’s take a look at the above Autocomplete component again with this approach:
If, like me, reducing the number of lines of code makes you forget about life’s problems, future worries, and state issues, you can explore all these form components from . Here is the list of the components:
Happy coding…
So, when kicking off a new project, here are my steps:
- I pick the colors that match my mood that day
- set up my theme with MUI
- and voilà… I start managing my form processes with RHF and ZOD. (Of course, after setting up the usual suspects like the router and other basics).
However, I’ve noticed that when using RHF — especially with the Controller— the code tends to get lengthy. For instance, let’s look at this Autocomplete code block:
Just to display a few cities in a fancy searchable dropdown, we ended up writing 29 lines of code. To avoid having to revisit code that slows down my flow, I created RHF-compatible form components with TypeScript-supported generic types. Now, let’s take a look at the above Autocomplete component again with this approach:
If, like me, reducing the number of lines of code makes you forget about life’s problems, future worries, and state issues, you can explore all these form components from . Here is the list of the components:
- Autocomplete / MultiAutocomplete
- Checkbox
- DatePicker / DateTimePicker
- Radio
- Select
- Slider
- Switch
- TextField
- Form
Happy coding…