https://github.com/awmpietro/bootbox-react
bootbox-react is a React Component based on bootboxjs <http://bootboxjs.com> library. This library brings fancy alerts, confirm and prompt dialogs built on top of Bootstrap. Check the website for more information.
https://github.com/awmpietro/bootbox-react
bootbox bootstrap bootstrap-dialog modal-dialogs react-component
Last synced: 12 days ago
JSON representation
bootbox-react is a React Component based on bootboxjs <http://bootboxjs.com> library. This library brings fancy alerts, confirm and prompt dialogs built on top of Bootstrap. Check the website for more information.
- Host: GitHub
- URL: https://github.com/awmpietro/bootbox-react
- Owner: awmpietro
- Created: 2020-04-07T22:00:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T19:01:04.000Z (over 3 years ago)
- Last Synced: 2024-08-08T16:50:18.215Z (almost 2 years ago)
- Topics: bootbox, bootstrap, bootstrap-dialog, modal-dialogs, react-component
- Language: JavaScript
- Homepage:
- Size: 2.06 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bootbox React
bootbox-react is a wrapper of the **bootboxjs <[http://bootboxjs.com](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(
<>
setShowConfirm(true) } Confirm
setShowAlert(true) } Alert
setShowPrompt(true) } Prompt
>
)
}
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" |