What is the best module system for a React component library?
JavaScript module system has been evolving as the language and technology evolves. There are a few different modules systems you can choose when you are bundling a JS library. The best module system for a frontend component library is ESM. It stands for ES Modules. It is It is the …
Learning CSS Grid
CSS Grid can be scary. It looks complicated and you might not even know where to start. If you want to get started quickly with CSS grid, I highly recommend Grid Garden. It an interactive learning module for CSS grid. It covers a lot of important concepts about CSS grid. …
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. …
Using act() in Jest Unit Tests with React-Dom
react-dom/test-utils provides a helper, act() to make sure all the tasks like rendering, user events, and data fetching (these are considered as units of interaction with a user interface) to be processed and applied to the DOM before making an assertion. We use act() when we are using jest with …
Using React.VFC Instead of React.FC
When we Type React functional components, it is better to use React.VoidFunctionComponent (React.VFC) instead of React.FC. React.FC always includes the children prop on your component whether you want or not. We can get around this by adding children?: never on your custom prop. However, it is much cleaner to use …
Quickest Way to Add Eslint to JavaScript and TypeScript Projects
The quickest way to add eslint to your project is using eslint init command. ./node_modules/.bin/eslint –init will create eslintrc.js and install dependencies automatically. (1) Getting started for JavaScript Application It is super simple. Just install eslint, use eslint tool with a init flag and follow the command line instruction. npm …
Using Parcel Bundler for TypeScript React App
Parcel is a relatively new JS bundler that promises zero configuration. I heard a lot of good things about this new bundler. So, I decided to give it a go. Here is the project that I created with Parcel, parcel-ts-react. In short, Parcel is great for small personal projects. However, …
Adding Custom Font to Storybook
Most of the design systems have custom fonts. Let’s see how we can bring them to Storybook. Once the font is in, we can start using it in canvas by adding CSS. My example storybook repo is here. First of all, we need to add a font folder and add …
Using Font Files Downloaded From Google Font
When you download a font family from Google Fonts, it contains multiple files, each corresponding to a different style. It is common to just import a regular 400 with the font face declaration. The better practice is to use the method called style linking. In @font-face, we can use the …
What You May Not Know About Jest’s Mount Method
If you are a React developer, you probably know the difference between mount and shallow when you are unit testing react components with jest. Mount renders full DOM. We use it when the component interacts with DOM Api or require a full lifecycle to fully test the component. On the …