Components

Dialog

GitHub

A Stimulus controller to show modals with the native Dialog element.

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/dialog

  2. Register the controller in your application

    app/javascript/controllers/index.js
    import { Application } from '@hotwired/stimulus'
import Dialog from '@stimulus-components/dialog'

const application = Application.start()
application.register('dialog', Dialog)

This component is based on the native <Dialog> Element. Check the documentation on MDN docs.

Example

Dialog

Are you sure?

Are you sure you want to apply these changes?

Usage

app/views/index.html
<div data-controller="dialog" data-action="click->dialog#backdropClose">
  <dialog data-dialog-target="dialog">
    <p>The modal's content here</p>

    <button type="button" data-action="dialog#close" autofocus>Cancel</button>
  </dialog>

  <button type="button" data-action="dialog#open">Open modal</button>
</div>

Optionally, you can customize the dialog style.

app/javascript/stylesheets/application.css
/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) {
  overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
  box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.5);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Add animations */
dialog[data-dialog-target="dialog"][open] {
  animation: fade-in 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing] {
  animation: fade-out 200ms forwards;
}

Configuration

AttributeDefaultDescriptionOptional
data-dialog-open-valuefalseOpen the modal by default.❌

Extending Controller

You can use inheritance to extend the functionality of any Stimulus component:

app/javascript/controllers/dialog_controller.js
import Dialog from "@stimulus-components/dialog"

export default class extends Dialog {
  connect() {
    super.connect()
    console.log("Do what you want here.")
  }

  // Function to override on open.
  open() {}

  // Function to override on close.
  close() {}

  // Function to override on backdropClose.
  backdropClose() {}
}

This controller will automatically have access to targets defined in the parent class.

If you override the connect, disconnect or any other methods from the parent, you'll want to call super.method() to make sure the parent functionality is executed.