Reputation: 59
I was wondering if anyone knows the easiest way to create a delete(confirmation) modal in react.js? I have been playing around with a few things but cannot get my head around it.
The modal needs to pop up from a bin icon upon click. I am a complete beginner to react so I am struggling quite a bit.
Upvotes: 5
Views: 23953
Reputation: 95
Best thing for custom modal designing is react-bootstrap
React-bootstrap contain its own Modal component, which is can be molded according to your own custom design, while having bootsrap
helps you with other designing things in your application too.
Modal Component is easy to use,handle & implement. By default it have its own cancel/ok buttons in it, you just need to implement and use.
here is the link:
https://react-bootstrap.github.io/components/modal/
Hope that will help you.
Happy Coding!
Upvotes: 0
Reputation: 22070
Here's an example using https://github.com/GA-MO/react-confirm-alert -
yarn add react-confirm-alert
display.jsx:
import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css'
const msg = `Item ${item.style} (barcode ${item.barcode}) is not
currently in this display. Do you want to add it?`
const addDialog = ({ onClose }) => {
const handleClickedNo = () => {
alert('clicked no')
onClose()
}
const handleClickedYes = () => {
alert('clicked yes')
onClose()
}
return (
<div className='add-dialog'>
<h3>Add item to display</h3>
<p>{msg}</p>
<div className="add-dialog-buttons">
<button onClick={handleClickedNo}>No</button>
<button onClick={handleClickedYes}>Yes, add item</button>
</div>
</div>
)
}
confirmAlert({ customUI: addDialog })
You can add your own custom css to override the defaults, e.g. I have:
/* override alert dialog defaults */
.react-confirm-alert-overlay {
background: rgba(0,0,0,0.5);
}
.react-confirm-alert {
background: white;
width: 80%;
padding: 1em;
}
/* custom alert dialog styles */
.add-dialog h3 {
margin: 0;
}
.add-dialog-buttons {
float: right;
}
.add-dialog-buttons button+button {
margin-left: 0.5em;
}
which looks like this -
Upvotes: 3
Reputation: 3686
You can use this npm package. https://github.com/gregthebusker/react-confirm-bootstrap.
Once you have installed it, you can use it like this in your project.
<ConfirmationModal
onConfirm={this.onConfirm}
body="Are you sure?"
confirmText="Yes"
cancelText="No"
title="Delete confirmation">
<Button>Button Text</Button>
</ConfirmationModal>
I have been using this package in my project with a few modifications. But the default package should be more than enough for your use case.
Upvotes: 2