Dialogs - nthnluu/no-bs-react GitHub Wiki
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
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();
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?"
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>)}
</>;
}