Delete Confirmation Modal Component - Livewire

Tech Stack: tailwindcss, alpine-js, livewire

Demo

Name Email Delete
Maximillia Hettinger jordon.mcdermott@example.net
Helmer Crona lindgren.margaretta@example.net
Kelton Gutkowski antonia.grimes@example.net
Mariano Beer annette.rowe@example.org
Una Spencer IV amaggio@example.net
Prof. Merl Zieme DDS kirstin42@example.com
Elian Yost kdeckow@example.com
Kara Stamm uhansen@example.com
Asa Ankunding V conn.harley@example.net
Karianne Weissnat zboncak.lillian@example.net

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro

Documentation

Usage

Include the component on the page from where you want to invoke the modal. You can also choose it and include it on the gobal template


@livewire('delete-modal-component')

To invoke the confirmation modal with the click of the delete button. You can emit the event to the model using Livewire's dispatchTo method.

Here is an example of emitting the event through Alpine JS


<button x-data="{}"
  @click="Livewire.dispatchTo(`delete-modal-component`,`showModal`, {
  modelType: `App\\Models\\Accommodation`,
  modelId: {{$accommodation->AccomodationTypeID}},
  modalHeading: `Delete Accommodation`,
  modalMessage: `Are you sure you want to delete accommodation {{$accommodation->Description}}?`,
  })" class="text-red-600 hover:text-red-900">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
  </svg>
</button>

Here, we are passing four parameters in the emitTo method.

  1. Component where we want to send the event (delete-modal-confirm in this case)
  2. Method to which we want to send the event to (showModal in this demo)
  3. Modal which you want to delete (App\\Models\\DummyUser) in this example
  4. Id of the modal which we are looking to delete
  5. Modal Heading
  6. Modal Message.