[React, TS, RHF + Yup, Vite, styled] Mortgage Repayment Calculator

What are you most proud of, and what would you do differently next time?

Pay special attention to prefixes and suffixes in text input fields. You can easily customize their presence and/or position with react props

Thanks to the NumericFormat input mask, which works in conjunction with rhf + yup validation, you can always make sure that the user enters only the data you expect to receive.

For styling, emphasis is placed on pseudo-classes and pseudo-elements, which makes the code reusable and leaves it independent of the components of the upper hierarchy. Tools such as css attr() and styled-props are also used.

This time I used TS instead of JS.

A complex result is achieved, but the realization remains as simple as possible.

What challenges did you encounter, and how did you overcome them?

The most difficult thing was to link react-hook-form with input mask NumericFormat and styled-component. I managed to achieve the desired result using Controller from RHF.

Useful resources in this challenge were:

• Controller from rhf: url
• Prop control, key to controller operation: url
• Documentation on NumericFormat customization pass-throughs: url
• Throwing props to styled url

At some point, I made it so complicated that I realized I was inventing my own DSL. Later on, I removed the object of customizing form fields and made everything as simple as possible.

What specific areas of your project would you like help with?

In the beginning, I tried to set up linaria for a long time, but it never worked. babel didn't work well at the build stage. So I gave up this idea and went to runtime CSS in the form of styled-components.