Novidades:
- Nova funcionalidade: Adicionada a opção de modificar o título da mensagem.
What's New:
- New Feature: Added the option to modify the message title.
Novidades:
- Correção de problemas : Corrigido documentação errada referente a implementação.
What's New:
- Bug fixes: Fixed incorrect documentation regarding implementation.
Novidades:
- Correção de problemas : Corrigido documentação errada referente a implementação.
What's New:
- Bug fixes: Fixed incorrect documentation regarding implementation.
Português
React SimpleDialog é uma biblioteca de diálogo simples e intuitiva, ideal para desenvolvedores que preferem uma solução rápida e sem complicações para diálogos de confirmação em seus aplicativos React. Esta biblioteca é parametrizada para executar uma função quando o botão de confirmação é clicado e permite a personalização dos ícones de acordo com o tipo de notificação escolhido.
English
React SimpleDialog is a simple and intuitive dialog library, ideal for developers who prefer a quick and straightforward solution for confirmation dialogs in their React applications. This library is configured to execute a function when the confirm button is clicked and allows customization of icons based on the chosen notification type.
A biblioteca suporta os seguintes tipos de notificação:
The library supports the following notification types:
-
alert -
error -
success -
info -
""(ícone padrão) | (default icon)
Primeiramente, instale a biblioteca via npm ou yarn:
First, install the library via npm or yarn:
npm install @burnim3/simpledialog
## ou | or
yarn add @burnim3/simpledialog
Para utilizar a biblioteca, você precisa envolver o seu aplicativo com o ConfirmationDialogProvider. Faça isso no arquivo principal onde você renderiza o componente raiz do seu aplicativo.
To use the library, you need to wrap your application with the ConfirmationDialogProvider. Do this in the main file where you render your app's root component.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ConfirmationDialogProvider } from "@burnim3/simpledialog";
import App from "./App.tsx";
import "./index.css";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<ConfirmationDialogProvider>
<App />
</ConfirmationDialogProvider>
</StrictMode>
);Depois de configurar o provider, você pode utilizar o SimpleDialog em qualquer componente do seu aplicativo. Importe o hook useConfirmDialog e chame a função openDialog conforme necessário.
After setting up the provider, you can use the SimpleDialog in any component of your application. Import the useConfirmDialog hook and call the openDialog function as needed.
Português
import { useConfirmDialog } from "@burnim3/simpledialog";
function App() {
const { openDialog } = useConfirmDialog();
const handleOpenDialog = () => {
openDialog(
"error", // Tipo de notificação: "alert", "error", "success", "info", ou ""
"TITULO ", // Título, se vazio o segue um texto padrão "CONFIRM"
"MENSAGEM DE TESTE?", // Mensagem a ser exibida no diálogo
"CANCELAR", // Texto do botão Cancelar. Se vazio, o botão não será exibido
"OK", // Texto do botão Confirmar
() => alert("Confirmado!") // Função a ser executada quando o botão Confirmar é clicado
);
};
return (
<div>
<button onClick={handleOpenDialog}>TESTE</button>
</div>
);
}
export default App;English
import { useConfirmDialog } from "@burnim3/simpledialog";
function App() {
const { openDialog } = useConfirmDialog();
const handleOpenDialog = () => {
openDialog(
"error", // Notification type: "alert", "error", "success", "info", or ""
"TITLE", // title, empty or follows the default text "CONFIRM"
"TEST MESSAGE?", // Message to be displayed in the dialog
"CANCEL", // Text for the Cancel button. If empty, the button will not be displayed
"OK", // Text for the Confirm button
() => alert("Confirmed!") // Function to be executed when the Confirm button is clicked
);
};
return (
<div>
<button onClick={handleOpenDialog}>TESTE</button>
</div>
);
}
export default App;A função openDialog aceita os seguintes parâmetros:
The openDialog function accepts the following parameters:
Tipo de Notificação: Uma string que define o tipo de notificação a ser exibido. Aceita os valores "alert", "error", "success", "info", ou "" (ícone padrão).
Notification Type: A string that defines the type of notification to be displayed. Accepts values "alert", "error", "success", "info", or "" (default icon).
Título : Uma string que define o título da notificação a ser exibido. Caso vazio um texto padrão "CONFIRM" é adicionado.
Title : A string defining the notification title to be displayed. If empty a default text "CONFIRM" is added.
Mensagem: Uma string que será exibida como a mensagem principal do diálogo.
Message: A string that will be displayed as the main message of the dialog.
Texto do Botão Cancelar: Uma string que define o texto do botão Cancelar. Se uma string vazia ("") for fornecida, o botão Cancelar não será renderizado.
Cancel Button Text: A string that defines the text of the Cancel button. If an empty string ("") is provided, the Cancel button will not be rendered.
Texto do Botão Confirmar: Uma string que define o texto do botão Confirmar. Este parâmetro é obrigatório.
Confirm Button Text: A string that defines the text of the Confirm button. This parameter is required.
Função de Callback: Uma função que será executada quando o botão Confirmar for clicado.
Callback Function: A function that will be executed when the Confirm button is clicked.
Aqui estão alguns exemplos de como usar a biblioteca para diferentes tipos de notificação:
Here are some examples of how to use the library for different notification types:
Português
openDialog(
"error",
"Título de Erro",
"Ocorreu um erro inesperado.",
"Fechar",
"OK",
() => console.log("Erro confirmado")
);English
openDialog(
"error",
"Error Title",
"An unexpected error occurred.",
"Close",
"OK",
() => console.log("Error confirmed")
);Português
openDialog(
"success",
"Título Sucesso ",
"Sua ação foi bem-sucedida!",
"",
"OK",
() => console.log("Ação confirmada com sucesso")
);English
openDialog(
"success",
"Success Title",
"Your action was successful!",
"",
"OK",
() => console.log("Action confirmed successfully")
);Português
openDialog(
"alert",
"Título Alerta",
"Atenção: verifique suas configurações.",
"",
"Entendi",
() => console.log("Alerta confirmado")
);English
openDialog(
"alert",
"Alert Title",
"Warning: Please check your settings.",
"",
"Got it",
() => console.log("Alert confirmed")
);Português
const handleDeleteItem = (item) => {
openDialog(
"alert",
"Confirmar Exclusão",
`Você tem certeza que deseja excluir o item "${item}"? Esta ação não pode ser desfeita.`,
"CANCELAR",
"EXCLUIR",
() => {
// Lógica para excluir o item
console.log(`${item} foi excluído.`);
}
);
};
// Uso do botão para excluir um item
<button onClick={() => handleDeleteItem("Item 1")}>Excluir Item 1</button>;English
const handleDeleteItem = (item) => {
openDialog(
"alert",
"Confirm Deletion",
`Are you sure you want to delete the item "${item}"? This action cannot be undone.`,
"CANCEL",
"DELETE",
() => {
// Logic to delete the item
console.log(`${item} has been deleted.`);
}
);
};
// Button to delete an item
<button onClick={() => handleDeleteItem("Item 1")}>Delete Item 1</button>;Português
const handleExitApp = () => {
openDialog(
"info",
"Confirmar Saída",
"Você realmente deseja sair do aplicativo? Todas as suas alterações não salvas serão perdidas.",
"CANCELAR",
"SAIR",
() => {
// Lógica para sair do aplicativo
console.log("Aplicativo fechado.");
// Aqui você pode redirecionar o usuário ou realizar outras ações
}
);
};
// Uso do botão para sair do aplicativo
<button onClick={handleExitApp}>Sair do Aplicativo</button>;English
const handleExitApp = () => {
openDialog(
"info",
"Confirm Exit",
"Do you really want to exit the application? All unsaved changes will be lost.",
"CANCEL",
"EXIT",
() => {
// Logic to exit the application
console.log("Application closed.");
// You can redirect the user or perform other actions here
}
);
};
// Button to exit the application
<button onClick={handleExitApp}>Exit Application</button>;Português
const handleSaveChanges = () => {
openDialog(
"success",
"Salvar Alterações",
"Você deseja salvar as alterações feitas? Certifique-se de que todas as informações estão corretas.",
"NÃO SALVAR",
"SALVAR",
() => {
// Lógica para salvar as alterações
console.log("Alterações salvas com sucesso.");
}
);
};
// Uso do botão para salvar alterações
<button onClick={handleSaveChanges}>Salvar Alterações</button>;English
const handleSaveChanges = () => {
openDialog(
"success",
"Save Changes",
"Do you want to save the changes made? Make sure all information is correct.",
"DON'T SAVE",
"SAVE",
() => {
// Logic to save changes
console.log("Changes saved successfully.");
}
);
};
// Button to save changes
<button onClick={handleSaveChanges}>Save Changes</button>;