Submitted about 1 month ago

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

ErazorWhite•80

@ErazorWhite

Preview site View code

This is a solution for...Mortgage repayment calculator

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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.

Community feedback

markus•2,250

@markuslewinPosted about 1 month ago

Looking good! I'm curious about the errors you got while setting up Linaria. It seems to be working for me when I:

Install the packages:

npm i @linaria/core @linaria/react @wyw-in-js/babel-preset
npm i -D @wyw-in-js/vite

Update the Vite config:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import wyw from "@wyw-in-js/vite";

export default defineConfig({
  base: "/mortgage-repayment-calculator/",
  plugins: [react(), wyw()],
});

Usage:

import { css } from "@linaria/core";

const myLinariaClass = css`
  background-color: red;
`;

export const CalculateButton = () => {
  return {/* ... */};
};

Marked as helpful

ErazorWhite•80

@ErazorWhitePosted about 1 month ago

@markuslewin I guess I forgot to use wyw-in-js. It seemed a bit odd to me that linaria requires a third-party wyw library to work.

Thank you.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord