react-confirm-toast

A light and customizable confirm toast component.

Creates a toast notification which allows you to confirm or reject the execution of a function.

Check the documentation web for a live demo.

Installation

Install using npm:

npm install react-confirm-toast

Install using yarn:

yarn add react-confirm-toast

Usage

React and React-dom are peer dependencies. Your project needs to have them installed in order to use this confirm toast.

import {ConfirmToast} from 'react-confirm-toast';

Options

Name	Value	Default	Required	Description
asModal	boolean	false		Toast will be displayed as a modal element, in the center of the viewport and darkening the background.
childrenClassName	string	none		Add a class to the children element.
customCancel	string	Cancel		Sets the cancel button message.
customConfirm	string	Ok		Sets the confirm button message.
customFunction	Function	none	✅	Required. Defines the function to confirm.
message	string	Do you want to continue?		Sets the toast question message.
position	'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'	bottom-right		Sets the toast position. It will be ignored if asModal is true.
showCloseIcon	boolean	true		Sets if the close icon is displayed.
theme	'light' | 'dark' | 'snow' | 'lilac'	light		Sets the toast style theme.

Usage with React

Minimum working example:

import {ConfirmToast} from 'react-confirm-toast';

// [...]

const myFunction =()=>{
    console.log('Confirmed!')
}

// [...]

<ConfirmToast
    customFunction={myFunction}
>
    <button>
        Click to run the default component
    </button>
</ConfirmToast>

Modal example:

import {ConfirmToast} from 'react-confirm-toast';

// [...]

const myFunction =()=>{
    console.log('Confirmed!')
}

// [...]

<ConfirmToast
    asModal={true}
    childrenClassName='margin-top-10'
    customCancel='Reject'
    customConfirm='Confirm'
    customFunction={myFunction}
    message='Do you want to confirm?'
    position='top-left' //will be ignored cause asModal=true
    showCloseIcon={false}
    theme='lilac'
>
    <button>
        Click to run the customized component
    </button>
</ConfirmToast>