useAlert

The useAlert hook returns the AlertComponent component to render the Alert and openAlert function to open the AlertComponent programatically.

Importing the hook

import { useAlert } from 'repopup';

Usage

Oops

Sonething wen wrong , please try again !!!

import React from 'react';
import { useAlert , RepopupProvider } from 'repopup';
import ReactDOM from 'react-dom';

const App = () => {
    const { AlertComponent: Alert, openAlert } = useAlert({
        title: 'Oops',
        variant: 'error',
        subtitle: 'Sonething wen wrong , please try again !!!',
        onConfirm: 'close'
    });
    return (
        <React.Fragment>
            <Button onClick={() => openAlert()}>Open</Button>
            <Alert />
        </React.Fragment>
    );
};

ReactDOM.render(
   <RepopupProvider>
    <App />
</RepopupProvider>, 
,document.querySelector('#app'));

Function Signature

function useAlert(
  options: UseAlertArgs,
): {AlertComponent:JSX.Element,openAlert: () => void}

Options

Option	Type	Description	Default
closeOnBackdropClick	boolean	Wheather or not to close the popup on clicking the backdrop	true
confirmButtonText	string	Use this to change the text on the "Confirm"-button.	'Confirm'
denyButtonText	string	Use this to change the text on the "Deny"-button.	'Deny'
variant	success| error| info| warning| question| null	varinat of a icon to be shown	null
onConfirm	React.MouseEventHandler<HTMLButtonElement> | undefined | 'close'	Use this as a click handler for the "Confirm"-button	() => {}
onDeny	React.MouseEventHandler<HTMLButtonElement> | undefined| 'close'	Use this as a click handler for the "Deny"-button.	() => {}
placement	'top'| 'center' | 'bottom'| 'center-start'| 'bottom-start'| 'top-start'| 'top-end'| 'bottom-end'| 'center-end'	Use this to change Popup window position	center
showConfirmButton	boolean	If set to true, a "Confirm"-button will be shown.	false
showDenyButton	boolean	If set to true, a "Deny"-button will be shown.	false
subtitle	string	Used for a description for the popup.
title	string	Used for the title of the popup