Stimulus Alert
A Stimulus Controller for a simple alert
Github
npm install stimulus-alert
×
Hello, Stimulus!
                    
    <div class="relative bg-yellow-100 text-white w-96 rounded-md p-4 hover:bg-yellow-200"
         data-controller="alert"
         data-alert-hidden-class-value="hidden">
        <span class="absolute text-yellow-900 font-bold top-1 right-3 cursor-pointer" data-action="click->alert#close">×</span>
        <div class="italic text-yellow-800">
            Hello, Stimulus!
        </div>
    </div>
                    
                
×
Hello, Stimulus!
And this alert is only visible for the first 20 seconds
                    
    <div class="relative bg-red-100 text-white w-96 rounded p-4 hover:bg-red-200"
         data-controller="alert"
         data-alert-hidden-class-value="hidden"
         data-alert-time-value="20000">
        <span class="absolute text-red-900 font-bold top-1 right-3 cursor-pointer" data-action="click->alert#close">×</span>
        <div class="font-bold text-2xl text-red-900">
            Hello, Stimulus!
        </div>
        <div class="italic text-red-800">
            And this alert is only visible for the first 20 seconds
        </div>
    </div>
                    
                
For these examples I used tailwind but you can use the styles that you want.
Installation
                
    npm install stimulus-alert
    // or
    yarn add stimulus-alert
                
            

Add the controller in your project

                
    import { Application } from 'stimulus'
    import AlertController from 'stimulus-alert'

    const application = Application.start()
    application.register('alert', AlertController)
                
            
Usage

Create a new element in you HTML with the controller alert and set data-alert-hidden-class-value .

data-alert-time-value is optional.

                    
    <div data-controller="alert" data-alert-hidden-class-value="hidden">
        <span data-action="click->alert#close">×</span>
        Hello, Stimulus!
    </div>
                    
                
Extending
                
    import AlertController from 'stimulus-alert'

    export default class extends AlertController {
      close() {
        super.close()
        // your code
      }

      timer() {
        super.timer()
        // your code
      }
    }
                
            
This project is released under the MIT license.
Twitter GitHub