react.js confirmation modal

Question

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.

Answer 1

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.

Answer 2

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, eg 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 -

Answer 3

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!