useModal

The useModal hook returns the ModalComponent component to render the Modal and openModal function to open the ModalComponent programatically.

Importing the hook

import { useModal } from 'repopup';

Basic Usage

React Hooks are ❤️❤️❤️❤️❤️

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

const App = () => {
    const { ModalComponent: Modal, openModal } = useModal({
        title: 'React Hooks are ❤️❤️❤️❤️❤️'
    });
    return (
        <React.Fragment>
            <Button onClick={() => openModal()}>Open</Button>
            <Modal />
        </React.Fragment>
    );
};

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

Full Usage

Do you want to save the changes ?

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

const App = () => {
    const { ModalComponent: Modal, openModal } = useModal({
        icon: 'question',
        title: 'Do you want to save the changes ?',
        showConfirmButton: true,
        onConfirm: () => console.log('Saved!!!'),
        confirmButtonText: 'Save',
        showDenyButton: true,
        denyButtonText: `Don't Save`,
        showCancelButton: true,
        onCancel: 'close'
    });
    return (
        <React.Fragment>
            <Button onClick={() => openModal()}>Open</Button>
            <Modal />
        </React.Fragment>
    );
};

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

Function Signature

function useModal(
  options: UseModalArgs,
): {ModalComponent:JSX.Element,openModal: () => void}

Options

Option	Type	Description	Default
background	string	Popup window background (CSS background property).	'#ffffff'
cancelButtonText	string	Use this to change the text on the "Cancel"-button.	Cancel
childrenAfterDefaultContent	ReactNode | null	Use this to place children after default content of the popup	null
childrenBeforeDefaultContent	ReactNode | null	Use this to place children before default content of the popup	null
closeOnBackdropClick	boolean	Wheather or not to close the popup on clicking the backdrop	true
color	string	Color for title and content	'#000000'
confirmButtonText	string	Use this to change the text on the "Confirm"-button.	'Confirm'
customClass	IModalCustomClassType;	A custom CSS class for the popup	{}
denyButtonText	string	Use this to change the text on the "Deny"-button.	'Deny'
icon	success| error| info| warning| question| null	varinat of a icon to be shown	null
onCancel	React.MouseEventHandler<HTMLButtonElement> | undefined | 'close'	Use this as a click handler for the "Cancel"-button.	() => {}
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.	() => {}
onSuccess	React.MouseEventHandler<HTMLButtonElement> | undefined| 'close'	Use this as a click handler for the "Success"-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
showCancelButton	boolean	If set to true, a "Cancel"-button will be shown.	false
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
showSuccessButton	boolean	If set to true, a "Success"-button will be shown.	false
subtitle	string	Used for a description for the popup.
successButtonText	string	Use this to change the text on the "Success"-button.	Ok
title	string	Used for the title of the popup