Next.js - Reusable Confirm Dialog

[mkubdev]

Metaphore Name

Next.js - Reusable Confirm Dialog

Share your metaphore story!

TODO: Add gif here!

TLDR

This is a complete guide on how to create a reusable confirm dialog component for next.js. Here we go!

Prerequisites

Before you begin, ensure that you have node and npm or Yarn installed on your machine. Here is a run-down of the core technologies we will be using.

• Next.js — A framework for building server-side rendered(SSR) React applications with ease. It handles most of the challenges that come with building SSR React apps.
• React — A very popular JavaScript DOM rendering framework for building scalable web applications using a component-based architecture.
• TailwindCSS — A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Setup

Create a next.js application with tailwind pre-configured:

npx create-next-app@latest --ts -e with-tailwindcss my_app
# or
yarn create next-app --typescript --example with-tailwindcss my_app

• Add the headlessui library:

npm install @headlessui/react -s
# or
yarn add @headlessui/react

Components

ConfirmDialog

import { Dialog, Transition } from '@headlessui/react';
import { Fragment, useState } from 'react';

import ButtonCancel from '@/components/ButtonCancel';
import ButtonConfirm from '@/components/ButtonConfirm';

interface Props {
  title: string;
  children: React.ReactNode;
  open: boolean;
  onClose: Function;
  onConfirm: Function;
}
export default function ConfirmDialog(props: Props) {
  const { open, onClose, title, children, onConfirm } = props;
  if (!open) {
    return <></>;
  }

  return (
    <Transition appear show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black bg-opacity-25" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex items-center justify-center min-h-full p-4 text-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
                <Dialog.Title
                  as="h3"
                  className="text-lg font-medium leading-6 text-gray-900"
                >
                  {title}
                </Dialog.Title>
                <div className="mt-2">
                  <p className="text-sm text-gray-500">{children}</p>
                </div>

                <div className="flex justify-between mt-4">
                  <Button
                    onClick={() => onClose()}
                    className="bg-secondary hover:bg-secondary-light"
                  >
                    No
                  </Button>
                  <ButtonConfirm
                    onClick={() => {
                      onClose();
                      onConfirm();
                    }}
                  >
                    Yes
                  </ButtonConfirm>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
}

ButtonCancel

interface Props {
  children: React.ReactNode;
  type?: 'submit' | 'button' | 'reset';
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  className?: string;
}
export default function ButtonCancel(props: Props) {
  const { type = 'button', children, onClick, className = '' } = props;
  return (
    <button
      className={`bg-red-400 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${className}`}
      type={type}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

ButtonConfirm

interface Props {
  children: React.ReactNode;
  type?: 'submit' | 'button' | 'reset';
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  className?: string;
}
export default function ButtonConfirm(props: Props) {
  const { type = 'button', children, onClick, className = '' } = props;
  return (
    <button
      className={`bg-green-400 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${className}`}
      type={type}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

How to use the component?

In order to use the <ConfirmDialog /> component, you need to use a boolean state to display it:

import { useState, useCallback } from 'react';

import ConfirmDialog from './ConfirmDialog';

export default function Home() {
  const [confirmOpen, setConfirmOpen] = useState(false);

  // ...

  const handleConfirm = useCallback(() => {
    console.log('confirmed!');
  }, []);

  return (
    <>
      <button
        className="px-4 py-2 font-bold text-white rounded bg-cyan-400 hover:bg-red-700 focus:outline-none focus:shadow-outline"
        onClick={() => setConfirmOpen(true)}
      >
        Open
      </button>
      <ConfirmDialog
        title="Modal title: Put a modal title!"
        open={confirmOpen}
        onClose={() => setConfirmOpen(false)}
        onConfirm={(e) => handleConfirm(e)}
      >
        Are you sure you have completed all answer?
      </ConfirmDialog>
    </>
  );
}

A demo/repos link

No response

[github-actions]

Hello Punk! It's great having you contribute to this project

Welcome to the community

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our GitHub Organisation - we help and encourage each other to contribute to open source little and often . Any questions let us know.

[darkterminal]

Noice!!! 🔥🔥🔥

Using useCallback to more safety. 😁

const handleConfirm = useCallback( () => { 
       console.log('confirmed!'); 
}, []);

[mkubdev]

Noice!!! 🔥🔥🔥

Using useCallback to more safety. 😁

const handleConfirm = useCallback( () => { 
       console.log('confirmed!'); 
}, []);

I will add this change, can you add a suggestion so that i commit change directly? Will finish it today, hehe i forget this one.

[darkterminal]

Is this metaphor are ready to close?

[mkubdev]

Is this metaphor are ready to close?

No, let me complete it! 😁

[darkterminal]

Complete and close this metaphor 💯