There are instances where you need to map elements and have multiple refs for an array of React Elements handled from higher-order components. For that and any similar circumstances, you can use the following approach to address this.Read more “Using multiple refs for an array of React Elements”
Chakra UI is becoming very popular as an HTML styling framework that allows you to style components in a more React way rather than css. One of the problems that people face is how to add animations to the React components using Chakra UI Animations.Read more “Chakra UI Animations”
When working with web we often need to animate or reveal html elements by detecting the scroll position. One such example would be to display a container for a state variable and scroll. The IntersectionObserver is a useful interface to achieve such functionality.Read more “How to use IntersectionObserver to detect the position in React”
React components offer many advantages to break the code and implement web features. But when it comes to some features it could bit difficult to make it work. One such problem would be to listen to document click events and making the changes to components like dismissing dropdowns when pressed on the background.Read more “How to dismiss dropdowns when pressed on background with React.js”
React hooks have been very promising solution for most of the coding issues that React framework had in old days. But for novice developers, it could be hard to understand. Especially if you are moving from old react to new. One of the main problem is how to fetch data with useEffect in a proper way.Read more “How to fetch data with useEffect”
Stripe is a great way to make payments for your web or mobile platforms. Being a full service payment platform, Stripe also gives you a variety of SDKs to implement your backend and frontend code with the best compliance options. In this tutorial you will learn how to add styles to stripe elements if you don’t want to use existing styles of the card input.Read more “How to add styles to stripe elements without using CardElement”
Why debounce with react hooks? We all come across that one button users keep on pressing until the data is loaded. Without guarding your code with every sort of if conditions, you can guard this by debouncing. For multiple tap scenarios, you can either propagate the event at the first tap/click or the last one.Read more “Avoid multiple clicks using debounce with react hooks”
Here we are discussing creating react app using npx create-react-app. npx comes with npm 5.2 and higher.
Prerequisite: You need to install Node >= 8.10 on your machine.
Creating an app using npx command
npx create-react-app my-app
create-react-app set up the main structure of the application.
- npx – Execute npm package binaries ( a tool for executing node packages )
npx comes bundled with npm version 5.2+.
If you want to run a package using npm, you must specify that package in your package.json file and install a package locally on a project:
npm install package-name
npx is a npm package runner.
1. React Must Be in Scope
Let’s assume we are creating “helloWorld.jsx” like below, you can see there is a compilation error display as “’React’ must be in scope when using JSX react/react-in-jsx-scope.”
const element = <h1>Hello World!</h1> export default element;
This happens due to “React” import necessary in JSX file.The React library must also always be in scope from JSX code. To overcome this error “import React from “react”;” must be added into the file as follows.
Recently I came up with a react native app which needs to integrate AWS GraphQL. Its actually provided with AWS App Sync and a very convenient way if you want a quick pub-sub. The problem was I had to do mutations as a background asynchronous process and wanted to update the app state from that. When I went through the documents I found the AWSAppSyncClient which is an Apollo Client. Although it was promising the react native examples were more focusing towards react or react-native Components which was really making a mess. Read more “Use AWS GraphQL for React Native Message App”
Recently I got the opportunity to use DatePicker of antd library https://ant.design/components/date-picker/ for a react.js project. It was really cool to use that until I found it was using the whole antd library to import this single antd components. It wasn’t right and there was a solution introduced by the antd team. I just blogged it for anyone who will find it interesting. Read more “How to use antd components without the whole library”
There are some instances where you need to debounce and avoid multiple clicks/taps on a button so that it will not generate the same action chain immediately with a consecutive click. An example would be an application with a touchscreen. If you click a button rapidly, that event will be generated more than once. As a solution, most of the time devs would block the UI until the action chain is completed. But this would be a bad experience if the user is blocked for any other interactions. A typical example can be a fetch call to update the state and if the invocation is asynchronous it could be causing more inconvenience.
Recently I happened to create a middle panel where different types of components could be rendered on top it. So the idea is, the panel should be a <div> wrapper around the middle content. For this kind of situation, higher order functions with components could come in handy to use. Read more “Higher order component wrappers using React.js and reusable components.”
This guide will simply cover to embed SASS support in React.js project.
First, install node-sass and sass-loader npm packages.
Yarn: yarn add sass-loader --dev yarn add node-sass NPM: npm install node-sass npm install sass-loader --save-dev