Let’s see the process to deploy React app on shared hosting with FTP Deploy GitHub Action. Prerequisites: Set up an FTP account in cPanel. Setup React Project in GitHub. Let’s...
Continue reading...React
Yup.array validate object property is unique with Formik in React.
The requirement is to validate objects in users array has unique name property. Define a custom method in Yup using Yup.addMethod. Yup.js provides this function to conveniently reuse test functions. Function has to either...
Continue reading...Setup Bitbucket CI/CD for React
Continuous integration (CI) validates all the stages of the development process from merging codes to testing builds while optimizing the code release cycles. Continuous deployment (CD) focuses on setting up...
Continue reading...Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration.
Use Case: One can enter source and destination address; For the address field, google places autocomplete is implemented. One can also add multiple way-points/stops between source and destination address. On...
Continue reading...Build a custom time picker React component
In this article, we’ll create a custom time picker component combining react-datetime and react-input-mask packages. Step1 — Start Basic CRA Step2 — Install react-datetime and react-input-mask packages Step3 — Setup...
Continue reading...Fabric.js in React — Draw bounding box in webcam preview using canvas events.
Fabric.js is a JavaScript library for HTML5 canvas. Using Fabric.js one can create object/shapes on canvas. We’ll be incorporating canvas events to draw bounding box over webcam component. Step1 —...
Continue reading...Automating Internationalization with Google Spreadsheet and i18next.
The article is for the front-end developers who are suffering from the manual “copy-and-paste” internationalization process. Through this guide executing a single line of script shall automate the entire process....
Continue reading...Integrate Jitsi Meet IFrame API in React
Jitsi is a set of open-source projects that allows you to easily build and deploy secure videoconferencing solutions.We’ll be using IFrame API to embed Jitsi Meet functionality in React application....
Continue reading...
