How to use web components in React with Typescript

When building a Laravel Inertia React application with TypeScript, I encountered an issue where custom web components were not recognized by TypeScript, even after importing and defining their types. This post documents how I resolved this issue for my Rich Text Editor component, but the solution applies to any custom web component. The Problem TypeScript […]

Read More →

Exmaple with useContext in React JS functional components

In this brief article, we will discuss the effective implementation of useContext. For those unfamiliar, useContext is a technique for sharing state within an application between various components, without requiring the passing of parameters from parent components to each child component. This approach facilitates component modularization and eliminates the need for additional properties that are […]

Read More →

Using ChaptGPT for generating React JS code

I was using copilot for while and it was really helpful to speed up the development. But wanted to give a try how ChatGPT compares with copilot as assistance. So I choose a simple use case of generating code for displaying list addresses and editing them in screen. Here is the first prompt I gave […]

Read More →

Show and Hide widget animation using React JS

This small tutorial for anyone want to implement a show and hide animation for widgets with simple script and help of some css styles. The final animation will be similar to you see below. If you are setting height values for a div element and the transition set to animate in css for the div […]

Read More →

React JS Tags component

I was looking for some light weight Tags component found Tagify to be interesting. But then figured out it got many features which I will not use. So I wanted to create something very minimalist. I found athe following article to follow as I wanted save time while creating this. https://jerrylowm.medium.com/build-a-tags-input-react-component-from-scratch-1524f02acb9a But that article was […]

Read More →