Bootbox React

bootbox-react is a wrapper of the bootboxjs <http://bootboxjs.com> module for React. Fancy alerts, confirm and prompt dialogs built on top of Bootstrap. Check the website for more information.

How To Install

• Install: npm i --save bootbox-react

How to Use

import  React, {useState} from  'react';
import  Bootbox  from  'bootbox-react';
...
function  App() {
	const [showConfirm, setShowConfirm] = useState(false);
	const [showAlert, setShowAlert] = useState(false)
	const [showPrompt, setShowPrompt] = useState(false)
	
	const handleConfirm = () => {
		console.log("You clicked Yes!");
		return setShowConfirm(false);
	}
	
	const handleCancel = () => {
		console.log("You clicked No!");
		return setShowConfirm(false);
	}

	const handleClose = () => {
		console.log("You closed Alert!");
		return setShowAlert(false);
	}

	const handlePrompt = (result) => {
		console.log(`User input: ${result}`);
		return setShowPrompt(false);
	}

	return(
		<>
			<button onClick={ () => setShowConfirm(true) } Confirm </button>
			<Bootbox show={showConfirm} 
				type={"confirm"}  
				message={"Do That?"}  
				onSuccess={handleYes}  
				onCancel={handleNo}  
				onClose={handleNo} 
			/>

			<button onClick={ () => setShowAlert(true) } Alert </button>
			<Bootbox show={showAlert} 
				type={"alert"}  
				message={"This is a simple alert"}  
				onClose={handleClose} 
			/>

			<button onClick={ () => setShowPrompt(true) } Prompt </button>
			<Bootbox show={showPrompt} 
				type={"prompt"}  
				message={"What's your name"}  
				onPrompt={handlePrompt} 
			/>
		</>
	)
}

export default App
	

Props

| Name | show | type | message | onSuccess | onCancel | onClose | onPrompt | cancelClassNames | successClassNames | cancelLabel | successLabel | |-----------------|-------------|------------------------------|----------------|---------------------------------|--------------------------------|----------------------------------------------|------------------------------------------|---------------------------------------|----------------------------------------|--------------------------------------|---------------------------------------| | PropType | bool | string | string | function | function | function | function | string | string | string | string | | Is Required | required | required | required | required for 'confirm' | required for 'confirm' | required for 'alert', optional for others | required for 'prompt' | optional | optional | optional | optional | | Accepted Values | true, false | "alert", "confirm", "prompt" | "Your message" | callback function to handle Yes | callback function to handle No | callback function to call when box is closed | callback function to handle user's input | classname(s) to apply to "No" button" | classname(s) to apply to "Yes" button" | Custom label to apply to "No" button | Custom label to apply to "Yes" button | | Default | false | null | "" | null | null | null | null | "btn-danger" | "btn-primary" | "No" | "Yes" |