React — await user input/confirmation

A replacement for for window.confirm() — HOOK STYLE!

Developing a app, dealing with CRUD means we often need to deal with a lot of user’s delete, and we need to provide a way to let user confirm deletion.

window.confirm() — This is the typical way of using the browser’s build in confirmation box.

if (window.confirm("Do you really want to leave?")) { 
window.open("exit.html", "Thanks for Visiting!");
}

What if we want to present a custom confirmation box with our fancy models?

The answer is Promises + Hooks.

These codes are very simple, but in my situation, very useful.

A very handy promise create function that we can call it at one place, and resolve it somewhere else. It sounds confusing isn’t it? Lets get down to coding and you will understand better how promises work in this instance.

Next up we create a useConfirm hook. This is the entire source of the hook.

I use material-ui, but you can use your own codes to write the model.

Basically the hook contains two main function ;

  1. getConfirmation — a function that toggles the model, creates a promise ( line 9), and return the promise ( line 13 ) to the caller.

2. Confirmation — a function that simply returns a model with 2 buttons — OK / Cancel. When click, these buttons will either resolve true/false, by using the resolver returned from createPromise. ( line 18 of useConfirm.js )

Using the hook.

A simple component above, renders a simple single button which calls the onDelete() function.

Notice this line?

const status = await getConfirmation()

In our useConfirmation hook, we created a pending promise, the promise is returned here, and your app can not do anything but to wait. Your app will now be waiting for the user to click either the OK or Cancel button, which will in turn return the promise’s resolver() function.

With the status from user confirmed, you can now get down to do whatever you need to process the request.

Try it on codesandbox.

Now you have a nice confirmation box, what other hooks would you be interested to write?

(image provided by www.freepik.com)

--

--

--

entrepreneur, developer, dream chaser

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Call Me with Home Assistant, Zoom and Telegram Bot

React Core-Fundamentals

Geolocate an IP Address to a Street Address in Node.JS

Valid Palindrome II.

30 Day Typescript Type Challenge — Challenge 29

#226: Japanese Anime Quiz to Commemorate Tokyo Honyaku Quest 2nd Anniversary!

Angular Jira Clone Part 00 — Prerequisites

CNN 10 聽力筆記練習(161)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Teu

Dave Teu

entrepreneur, developer, dream chaser

More from Medium

Creating a PWA Using React and Adding Manual Controls to Update Service Worker

Testing a React Component Library package locally, using Yarn and Craco

React Component Libraries

Creating custom Context to share state between components in React

UI component library with Storybook

UI Component Library banner