Cancel a React Modal with Escape Key or External Click

Lou Mauget Development Technologies, React, Tutorial Leave a Comment

Web application users are accustomed to canceling a popup (aka dialog or modal) by pressing the escape key, and many modals can even cancel if the user clicks outside it. How does a React developer code that without a plumbing mess between the modal and every visible component beneath it? How do you cancel a React modal with an escape key or external click?

I’m glad you asked because I have an answer. In this blog, I’ll show a pair of easy-to-use custom React hooks that simplify the task.

Stripe Elements Integration

Getting Started With Stripe Elements Integration

David Hoffmann Development Technologies, JavaScript, React, Tutorial Leave a Comment

Recently, I was involved with a project that required the client to collect payments from their customers. This brought up many questions on the best approach to process orders to accomplish this.

We wondered, is a Stripe Elements integration the answer, or can we avoid fees and process payments ourselves? For the vast majority of companies, ourselves included, yes, Stripe is the answer. The complexity of Payment Card Industry (PCI) Compliance alone makes this a no-brainer. In addition, the development of payment infrastructure is very time-consuming and costly.

In this blog, I will discuss Stripe Elements and its integration and the best way to implement them with React. I will cover basic Stripe information, how to set up a Stripe account, and a brief code overview to help you get on your way to incorporating Stripe…

React Hooks Form

React Hook Form

Braden Niswonger Development Technologies, React Leave a Comment

In this blog, we will explore React Hook Form, an extremely lightweight and effective form building library using React. This open-source, third-party library has no dependencies and can be integrated with most existing forms or libraries. It provides the ability to subscribe to individual components, limiting the frequency of re-renders and making it more efficient.

Below, we will learn some of the basic usages of React Hook Form, some more in-depth features, and then look at an example form integrated with an existing UI library.