Dialogs - nthnluu/no-bs-react GitHub Wiki

Overview

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Presenting dialogs with the useDialog() hook

The useDialog() hook allows you to imperatively present dialogs to users from any component within your app. The hook provides functions that you can call with the respective configuration object to display a customized dialog to the user.

const {openAlertDialog} = useDialog();

AlertDialog

Overview

Alerts are dialogs that inform the user about a situation requiring acknowledgment.

Most alerts won't need a title. They summarize the situation and the decision to be made in a sentence or two by either:

  • Asking a question (e.g. "Delete this file?")
  • Making a statement related to the action buttons (e.g. "Moving this file will break any previously generated links.")

Add a title to an alert only for high-risk situations (such as permanent data loss) or if needed to disambiguate. Users should be able to understand the decision based on the title and button text alone.

If a title is required:

  • Use a clear question or statement with an explanation in the content area, such as "Delete this project?".
  • Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?"

Usage

You can present an AlertDialog to the user by using the openAlertDialog function provided by useDialog(). To properly present the dialog, you must call this function with an AlertDialogConfig object:

Example:

interface File {
    id: number;
    fileName: string;
}

const exampleFiles: File[] = [{id: 0, fileName: "pic.jpeg"}, {id: 1, fileName: "resume.pdf"}];

function AlertDialogExample() {
    const {openAlertDialog} = useDialog();
    
    function deleteFile(file: File) {
        console.log(`Deleted ${file.fileName}`);
    }
    
    function openDialog(file: File) {
        const config: AlertDialogConfig = {
            title: `Rename ${file.fileName}?`,
            description: "Renaming this file will break old links.",
            onConfirm: () => {
                // Called when the user clicks the confirm button.
                deleteFile(file);
            }
        };
    }

    return <>
        {exampleFiles.map(file => <button key={file.id} onClick={() => openDialog(file)}>
            Delete {file.fileName}
        </button>)}
    </>;
}
⚠️ **GitHub.com Fallback** ⚠️