How to Make Scalable SVG React Components

SVG stands for Scalable Vector Graphic. The svg image can scale up and down according the size of the outer container as long as the image width is set to 100%. Let’s explore how we can make a React illustration component that supports multiple size by scaling up and down.

Firstly, we create an illustration container component that is used for all the svg illustration components. This wrapper component has three sizes, small, medium, large according to the design spec.

styles.scss defines the size variation.

By using this wrapper, we can add any svg that scales according to the design size spec in the container component.

To make svg scalable, the key is to set width 100% with a block display. Then, the image will scale according to the outer container.

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …