Components

Confirmation

GitHub

A Stimulus controller to confirm actions manually.

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/confirmation

  2. Register the controller in your application

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

const application = Application.start()
application.register('confirmation', Confirmation)

Examples

Basic example

Confirmation

You can also use multiple inputs and checkboxes, or just checkboxes, to activate multiple buttons and inputs.

Confirmation

Usage

data-confirmation-content can contain any desired value.

It is only required if used on an input element of type "text" that also includes the attribute data-confirmation-target="input".

app/views/index.html
<form data-controller="confirmation">
  <input data-confirmation-target="input" data-confirmation-content="DELETE" data-action="confirmation#check" />

  <label>
    <input data-confirmation-target="input" data-action="confirmation#check" type="checkbox" />

    I have read the terms and conditions
  </label>

  <label>
    <input data-confirmation-target="input" data-action="confirmation#check" type="checkbox" />

    I confirm that I want to permanently delete this project
  </label>

  <button type="submit" data-confirmation-target="item" disabled>Delete</button>
  <input data-confirmation-target="item" disabled />
</form>

Extending Controller

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

app/javascript/controllers/confirmation_controller.js
import Confirmation from "@stimulus-components/confirmation"

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

  // Function to determine whether the inputs should be enabled.
  check() {
    super.check()
  }
}

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.