react.js confirmation modal

user_5721580 0
Viewed 18202

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.

reactjs frontend modal-dialog javascript
3 Answers

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 -

dialog

user_2433920

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!

user_122138830
Related