Stimulus Components

https://github.com/stimulus-components/stimulus-components
Admin
A monorepo of reusable Stimulus controllers, providing a collection of small, publishable npm...
Tokens:25,120
Snippets:356
Trust Score:7.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Basic Hotkey Usage

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/hotkey/index.html

Example of using the hotkey component to trigger a button click when the 'i' key is pressed.

```html
<button data-action="hotkey-click@window->hotkey#click" data-hotkey-key-value="i">
  Press i to click the button
</button>
```

--------------------------------

### Stimulus Clipboard Component Setup

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/clipboard/index.html

Register the Clipboard controller with your Stimulus application. This is a one-time setup required for the component to function.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Clipboard from "./src/index"

const application = Application.start()
application.register("clipboard", Clipboard)

document.querySelectorAll("pre code").forEach((el) => {
  hljs.highlightElement(el)
})
```

--------------------------------

### Auto Submit Form Example

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-auto-submit.md

Example of a form using the auto-submit controller. It demonstrates submitting the form on keyup events for text fields and change events for checkboxes.

```erb
<%= form_with model: @todo, data: { controller: 'auto-submit' } do |f| %>
  <div class="field">
    <%= f.label :description %>

    <!-- With custom event! -->
    <%= f.text_field :description, data: { action: 'keyup->auto-submit#submit' } %>
  </div>

  <div class="field">
    <%= f.label :completed %>
    <%= f.check_box :completed, data: { action: 'auto-submit#submit' } %>
  </div>

  <%= f.submit %>
<% end %>
```

--------------------------------

### Install Character Counter Package

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/pages/installation.md

Use yarn to add the @stimulus-components/character-counter package to your project dependencies.

```bash
$ yarn add @stimulus-components/character-counter
```

--------------------------------

### Basic HTML Structure for Clipboard

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/clipboard/index.html

Example HTML structure demonstrating how to use the clipboard component. The content within the divs is what can be copied.

```html
<div class="flex space-x-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

--------------------------------

### Extend Prefetch Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-prefetch.md

You can extend the Prefetch controller to add custom logic. This example shows how to log a message when the controller connects.

```javascript
import Prefetch from "@stimulus-components/prefetch"

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

--------------------------------

### Extending the Popover Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-popover.md

Example of extending the Stimulus Popover controller to add custom behavior in the `connect` method.

```javascript
import Popover from "@stimulus-components/popover"

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

--------------------------------

### Chart.js with Target and Action

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-chartjs.md

This example shows how to integrate Chart.js with Stimulus, using a target for the canvas and defining an action to update the chart. This is useful for dynamic chart updates.

```html
<div
  data-controller="chartjs"
  data-chartjs-data-value='{ "labels": ["January", "February", "March", "April", "May", "June", "July"], "datasets": [{ "label": "My First dataset", "backgroundColor": "transparent", "borderColor": "#3B82F6", "data": [37, 83, 78, 54, 12, 5, 99] }] }'
>
  <canvas data-chartjs-target="canvas"></canvas>

  <!-- You need to define this action -->
  <button data-action="chartjs#update">Update me!</button>
</div>
```

--------------------------------

### Extending the Character Counter Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-character-counter.md

This JavaScript example shows how to extend the Stimulus Character Counter controller to add custom logic.

```javascript
import CharacterCounter from "@stimulus-components/character-counter"

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

    this.count // Will return the number of characters in the input/texterea.
  }
}
```

--------------------------------

### Basic Confirmation HTML Structure

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-confirmation.md

This HTML demonstrates the basic setup for the Stimulus Confirmation controller, including an input for manual confirmation and a submit button.

```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>
```

--------------------------------

### Route for Comments

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-content-loader.md

Configures the application routes to include a GET request for comments.

```ruby
Rails.application.routes.draw do
  get :comments, to: 'posts#comments'
end
```

--------------------------------

### Extending the Stimulus Speech Recognition Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-speech-recognition.md

This JavaScript example shows how to extend the base Stimulus Speech Recognition controller. It demonstrates overriding the `connect` method to add custom logic after the controller has connected to its element.

```javascript
import SpeechRecognitionController from "@stimulus-components/speech-recognition"

export default class extends SpeechRecognitionController {
  connect() {
    super.connect()
    console.log("Speech recognition controller connected.")
  }
}
```

--------------------------------

### Extending Stimulus Clipboard Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-clipboard.md

This JavaScript example shows how to extend the Stimulus Clipboard controller. You can override the `connect`, `copy`, and `copied` methods to customize behavior. Ensure you import the controller correctly.

```javascript
import Clipboard from "@stimulus-components/clipboard"

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

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

  // Function to override when to input is copied.
  copied() {
    //
  }
}
```

--------------------------------

### Basic Content Loader Usage

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-content-loader.md

Loads comments from the specified URL and replaces the loading indicator. This is the basic setup for the content loader.

```html
<div data-controller="content-loader" data-content-loader-url-value="<%= comments_path %>">
  <i class="fas fa-spinner fa-spin"></i>
  Loading comments... This content will be replaced by the content of the `posts/comments` partial generated by Rails.
</div>
```

--------------------------------

### Extending the Animated Number Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-animated-number.md

This example shows how to extend the Stimulus Animated Number controller. You can override or add to the `connect` method to perform custom actions when the controller connects.

```javascript
import AnimatedNumber from "@stimulus-components/animated-number"

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

--------------------------------

### Extending Stimulus Remote Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-remote-rails.md

An example of extending the Stimulus Remote controller to add custom logic in the `connect` method.

```javascript
import Remote from "stimulus-remote-rails"

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

--------------------------------

### Extending the Stimulus Dialog Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-dialog.md

This JavaScript example shows how to extend the Stimulus Dialog controller. You can override methods like `connect`, `open`, `close`, and `backdropClose` to add custom logic.

```javascript
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() {}
}
```

--------------------------------

### Register Stimulus Sound Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/sound/index.html

Register the Sound controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Sound from "./src/index"

const application = Application.start()
application.register("sound", Sound)
```

--------------------------------

### Extending the Hotkey Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-hotkey.md

Extend the base Hotkey controller to add custom behavior to the click or focus actions. This example logs a message when the click action is triggered.

```javascript
import Hotkey from "@stimulus-components/hotkey"

export default class extends Hotkey {
  click(event) {
    super.click(event)
    console.log("Do what you want here.")
  }

  focus(event) {
    super.focus(event)
  }
}
```

--------------------------------

### Link Click with Hotkey

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-hotkey.md

Use this snippet to trigger a click action on a link when a specific key is pressed. The 'g' key is used in this example.

```html
<a href="/docs" data-controller="hotkey" data-action="keydown.g@document->hotkey#click"> Go to docs (g) </a>
```

--------------------------------

### Programmatic Notification Display

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-notification.md

This example shows how to hide the notification by default and open it programmatically using a CustomEvent. Set `data-notification-hidden-value` to `true` and dispatch an event to trigger the show action.

```html
<div
  data-controller="notification"
  data-notification-hidden-value="true"
  data-action="awesome@window->notification#show"
  class="transition transform duration-1000 hidden"
  data-transition-enter-from="opacity-0 translate-x-6"
  data-transition-enter-to="opacity-100 translate-x-0"
  data-transition-leave-from="opacity-100 translate-x-0"
  data-transition-leave-to="opacity-0 translate-x-6"
>
  <p>This alert will magically disappear!</p>

  <button data-action="notification#hide">Close</button>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const event = new CustomEvent("awesome")

    window.dispatchEvent(event)
  })
</script>
```

--------------------------------

### Register Stimulus Prefetch Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/prefetch/page.html

Register the Prefetch controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Prefetch from "./src/index"

const application = Application.start()
application.register("prefetch", Prefetch)
```

--------------------------------

### Extend Stimulus Glow Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-glow.md

Example of extending the Stimulus Glow controller in your JavaScript. This allows you to add custom behavior within the `connect` method or other controller lifecycle methods.

```javascript
import Glow from "stimulus-glow"

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

--------------------------------

### Stimulus Textarea Autogrow Initialization

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/textarea-autogrow/index.html

This snippet shows the basic setup for using the Textarea Autogrow component with a Stimulus application. Ensure you have the correct import paths for Stimulus and the component itself.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import TextareaAutogrow from "./src/index"

const application = Application.start()
application.register("textarea-autogrow", TextareaAutogrow)
```

--------------------------------

### Lazy Loading Animated Number

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-animated-number.md

This example demonstrates lazy loading for the animated number. The animation will only begin when the element becomes visible on the screen, utilizing Intersection Observers.

```html
<div
  data-controller="animated-number"
  data-animated-number-lazy-value=""
  data-animated-number-start-value="0"
  data-animated-number-end-value="200"
  data-animated-number-duration-value="3000"
>
  This animation will start only when the element become visible thanks to Intersection Observers.
</div>
```

--------------------------------

### Basic Animated Number

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-animated-number.md

This snippet shows a basic implementation of the animated number controller. It animates a number from a start value to an end value over a specified duration.

```html
<div
  data-controller="animated-number"
  data-animated-number-start-value="0"
  data-animated-number-end-value="200"
  data-animated-number-duration-value="3000"
>
  0
</div>
```

--------------------------------

### Register Stimulus Chartjs Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/chartjs/index.html

This snippet shows how to import and register the Chartjs controller with your Stimulus application. Ensure Chart.js is installed as a dependency.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Chartjs from "./src/index"

const application = Application.start()
application.register("chartjs", Chartjs)
```

--------------------------------

### Content Loader with Combined Lazy Loading and Refresh Interval

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-content-loader.md

Combines lazy loading with a refresh interval. The content is fetched initially when the element becomes visible, and then reloaded at the specified interval. The timer starts only after the first fetch.

```html
<div
  data-controller="content-loader"
  data-content-loader-url-value="/message.html"
  data-content-loader-lazy-loading-value=""
  data-content-loader-refresh-interval-value="5000"
>
  You can combine lazy loading and refresh interval. The timer will start only after the first fetch.
</div>
```

--------------------------------

### Extending Auto Submit Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-auto-submit.md

Example of extending the Stimulus Auto Submit controller to customize behavior, such as changing the default submission delay or adding custom logic in the connect method.

```javascript
import AutoSubmit from "stimulus-auto-submit"

export default class extends AutoSubmit {
  static values = {
    delay: {
      type: Number,
      default: 1000, // You can change the default delay here.
    },
  }

  connect() {
    super.connect()
    console.log("Do what you want here.")
  }
}
```

--------------------------------

### Run Project Locally

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/README.md

Use this command to launch the project locally for development.

```bash
$ pnpm run dev

```

--------------------------------

### Extending Stimulus Chart.js Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-chartjs.md

Extend the base Chart.js controller to add custom behavior. This example demonstrates overriding methods like 'connect' and defining custom actions like 'update', and setting default options.

```javascript
import Chartjs from "@stimulus-components/chartjs"

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

    // The chart.js instance
    this.chart

    // Options from the data attribute.
    this.options

    // Default options for every charts.
    this.defaultOptions
  }

  // Bind an action on this method
  async update() {
    const response = await fetch("https://example.com/chart_data.json")
    const data = await response.json()

    this.chart.data = data
    this.chart.update()
  }

  // You can set default options in this getter for all your charts.
  get defaultOptions() {
    return {
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
    }
  }
}
```

--------------------------------

### Publish a New Version

Source: https://github.com/stimulus-components/stimulus-components/blob/master/README.md

Commands to lint, test, navigate to a specific package, version, and publish a new release.

```bash
$ pnpm run lintfix && pnpm run test
$ cd components/<specific-package-name>
$ pnpm version <patch|minor|major>
$ pnpm publish
```

--------------------------------

### Import Lightgallery SCSS

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-lightbox.md

Alternatively, import the SCSS for lightgallery.js if you are using Sass for styling.

```scss
@import "~lightgallery/scss/lightgallery";
```

--------------------------------

### Register Stimulus Timeago Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/timeago/index.html

Register the Timeago controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Timeago from "./src/index"

const application = Application.start()
application.register("timeago", Timeago)
```

--------------------------------

### Root Commands for Stimulus Components

Source: https://github.com/stimulus-components/stimulus-components/blob/master/AGENTS.md

Lists essential commands to run from the repository root for managing dependencies, linting, testing, and serving the documentation site.

```bash
pnpm install

pnpm run lint

pnpm run lintfix

pnpm run test

pnpm run docs
```

--------------------------------

### Publishing a Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/AGENTS.md

Steps to prepare and publish a Stimulus component package after making changes. Includes linting, testing, versioning, and publishing.

```bash
pnpm run lintfix && pnpm run test
cd components/<name>
pnpm version <patch|minor|major>
pnpm publish
```

--------------------------------

### HTML Structure for Stimulus Clipboard

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-clipboard.md

This HTML demonstrates how to set up the Stimulus Clipboard controller. It includes a text input as the source and a button to trigger the copy action. Configuration options for success message and duration are also shown.

```html
<div data-controller="clipboard" data-clipboard-success-content-value="Copied!">
  <input type="text" value="Click the button to copy me!" data-clipboard-target="source" />

  <button type="button" data-action="clipboard#copy" data-clipboard-target="button">Copy to clipboard</button>
</div>
```

--------------------------------

### Register Stimulus Sortable Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/sortable/index.html

Register the Sortable controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Sortable from "./src/index"

const application = Application.start()
application.register("sortable", Sortable)
```

--------------------------------

### Register Stimulus Scroll To Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/scroll-to/index.html

Register the ScrollTo controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import ScrollTo from "./src/index"

const application = Application.start()
application.register("scroll-to", ScrollTo)
```

--------------------------------

### Basic Prefetch Link

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-prefetch.md

Add the `data-controller="prefetch"` attribute to any link you want to prefetch. Links are only prefetched if they are in the viewport and the user has a fast connection.

```html
<a href="/about" data-controller="prefetch">About</a>.
```

--------------------------------

### HTML Structure for Read More

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-read-more.md

Sets up the HTML for the Read More controller, including the content element and the toggle button. Customizes the button text via data attributes.

```html
<div data-controller="read-more" data-read-more-more-text-value="Read more" data-read-more-less-text-value="Read less">
  <p class="my-content" data-read-more-target="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam.
  </p>

  <button data-action="read-more#toggle">Read more</button>
</div>
```

--------------------------------

### Registering RailsNestedForm with Stimulus

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/rails-nested-form/index.html

Register the RailsNestedForm controller with your Stimulus application. This is typically done once when your Stimulus application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import RailsNestedForm from "./src/index"

const application = Application.start()
application.register("nested-form", RailsNestedForm)
```

--------------------------------

### Basic Lightbox Usage

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-lightbox.md

Set up a basic Stimulus Lightbox controller by wrapping image links within a div with the `data-controller="lightbox"` attribute.

```html
<div data-controller="lightbox">
  <a href="img/img1.jpg">
    <img src="img/img1.jpg" alt="" />
  </a>

  <a href="img/img2.jpg">
    <img src="img/img2.jpg" alt="" />
  </a>

  <a href="img/img3.jpg">
    <img src="img/img3.jpg" alt="" />
  </a>
</div>
```

--------------------------------

### Register Stimulus Hotkey Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/hotkey/index.html

Register the Hotkey controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Hotkey from "./src/index"

const application = Application.start()
application.register("hotkey", Hotkey)
```

--------------------------------

### Lightbox Usage with Options

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-lightbox.md

Configure the lightbox with initial options by setting the `data-lightbox-options-value` attribute on the controller's element. The options are provided as a JSON string.

```html
<div data-controller="lightbox" data-lightbox-options-value='{"index": 2}'>
  <a href="img/img1.jpg">
    <img src="img/img1.jpg" alt="" />
  </a>

  <a href="img/img2.jpg">
    <img src="img/img2.jpg" alt="" />
  </a>

  <a href="img/img3.jpg">
    <img src="img/img3.jpg" alt="" />
  </a>
</div>
```

--------------------------------

### Register Stimulus Content Loader

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/content-loader/index.html

Register the ContentLoader controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import ContentLoader from "./src/index"

const application = Application.start()
application.register("content-loader", ContentLoader)
```

--------------------------------

### Load Stimulus and Character Counter via CDN

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/pages/installation.md

Include Stimulus core and the CharacterCounter UMD versions from a CDN in your HTML and register the controller.

```html
<head>
  <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
  <script src="https://unpkg.com/@stimulus-components/character-counter/dist/stimulus-character-counter.umd.js"></script>

  <script>
    const application = Stimulus.Application.start()

    application.register("character-counter", window.StimulusCharacterCounter)
  </script>
</head>
```

--------------------------------

### Register Stimulus Animated Number

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/animated-number/index.html

Register the AnimatedNumber controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import AnimatedNumber from "./src/index"

const application = Application.start()
application.register("animated-number", AnimatedNumber)
```

--------------------------------

### Register Checkbox Select All Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/checkbox-select-all/index.html

Register the CheckboxSelectAll controller with the Stimulus application. This is typically done once when the application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import CheckboxSelectAll from "./src/index"

const application = Application.start()
application.register("checkbox-select-all", CheckboxSelectAll)
```

--------------------------------

### Register Stimulus Carousel Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/carousel/index.html

Register the Carousel controller with your Stimulus application. This is typically done once when your application starts.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Carousel from "./src/index"
import "swiper/css/bundle"

const application = Application.start()
application.register("carousel", Carousel)
```

--------------------------------

### Register Stimulus Popover Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/popover/index.html

Register the Popover controller with your Stimulus application. This is a required setup step before using the component.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Popover from "./src/index"

const application = Application.start()
application.register("popover", Popover)
```

--------------------------------

### Register Stimulus Dialog Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/dialog/index.html

Register the Dialog component with your Stimulus application. This is a one-time setup required for the component to function.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Dialog from "./src/index"

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

--------------------------------

### Rails Model Setup for Nested Attributes

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-rails-nested-form.md

Define `has_many` association and `accepts_nested_attributes_for` in your Rails model to enable nested attribute manipulation.

```ruby
class User < ApplicationRecord
  has_many :todos
  accepts_nested_attributes_for :todos, reject_if: :all_blank, allow_destroy: true
end

class Todo < ApplicationRecord
  belongs_to :user
end
```

--------------------------------

### Register Stimulus Notification Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/notification/index.html

Register the Notification controller with your Stimulus application. This is typically done in your main Stimulus setup file.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import Notification from "./src/index"

const application = Application.start()
application.register("notification", Notification)
```

--------------------------------

### Import Lightgallery CSS

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-lightbox.md

Import the necessary CSS for lightgallery.js. This can be done in your main JavaScript file or your SCSS file.

```javascript
import "lightgallery/css/lightgallery.css"
```

--------------------------------

### Stimulus Action for Prepending Content

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/remote-rails/index.html

Use this Stimulus action with a link to prepend content fetched from a remote URL. Ensure the remote URL returns HTML.

```html
<a data-action="remote#prepend" href="/message.html">Click me to prepend ☝️</a>
```

--------------------------------

### Repository Structure

Source: https://github.com/stimulus-components/stimulus-components/blob/master/AGENTS.md

Illustrates the directory layout of the Stimulus Components monorepo, including the placement of individual controller packages, documentation site, and shared utilities.

```bash
stimulus-components/
├── components/           # Stimulus controller packages
│   └── <name>/           # e.g. dropdown, dialog, character-counter
│       ├── src/index.ts  # Controller entry (TypeScript)
│       ├── spec/         # Vitest tests (when present)
│       ├── vite.config.mts
│       ├── package.json
│       ├── README.md
│       └── CHANGELOG.md
├── docs/                 # Nuxt 3 documentation site
├── utils/                # Shared helpers (debounce, throttle, sleep)
├── pnpm-workspace.yaml   # Workspaces: docs, components/**
├── package.json          # Root scripts: lint, lintfix, test, docs
├── tsconfig.json
├── .eslintrc.js
└── .prettierrc
```

--------------------------------

### Registering the Auto Submit Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/auto-submit/index.html

This snippet shows how to register the AutoSubmit controller with your Stimulus application. Ensure this is done after starting the application.

```javascript
import "../app.css"
import "@hotwired/turbo"
import { Application } from "@hotwired/stimulus"
import AutoSubmit from "./src/index"

const application = Application.start()
application.register("auto-submit", AutoSubmit)
```

--------------------------------

### Basic Color Picker HTML Structure

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-color-picker.md

Set up the HTML for the color picker component. It requires a hidden input for the color value and a div to render the picker button.

```html
<div data-controller="color-picker">
  <input type="hidden" name="color" value="#667EEA" data-color-picker-target="input" />

  <div data-color-picker-target="button"></div>
</div>
```

--------------------------------

### Registering the Stimulus Character Counter

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/character-counter/index.html

This code registers the CharacterCounter controller with the Stimulus application. Ensure this is done in your main Stimulus setup file.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import CharacterCounter from "./src/index"

const application = Application.start()
application.register("character-counter", CharacterCounter)
```

--------------------------------

### HTML Structure for Stimulus Sound Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-sound.md

This HTML demonstrates how to integrate the Stimulus Sound controller into your application. It includes buttons to trigger various audio actions and parameters to control mute, loop, and volume.

```html
<div data-controller="sound" data-sound-url-value="/path/to/your/sound.mp3">
  <button type="button" data-action="sound#play">▶️ Play</button>
  <button type="button" data-action="sound#pause">⏸️ Pause</button>
  <button type="button" data-action="sound#reset">⏹️ Reset</button>
  <button type="button" data-action="sound#muted" data-sound-muted-param="true">🔇 Mute</button>
  <button type="button" data-action="sound#muted" data-sound-muted-param="false">🔈 Unmute</button>
  <button type="button" data-action="sound#loop" data-sound-loop-param="true">🔁 Loop</button>
  <button type="button" data-action="sound#volume" data-sound-volume-param="1">🔊 Volume to 100%</button>
  <button type="button" data-action="sound#volume" data-sound-volume-param="0.25">🔉 Volume to 25%</button>
</div>
```

--------------------------------

### Carousel with Options

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-carousel.md

Configure carousel behavior by passing a JSON string of Swiper.js options to the `data-carousel-options-value` attribute. This example sets the direction to vertical.

```html
<div data-controller="carousel" class="swiper" data-carousel-options-value='{"direction": "vertical"}'>
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

```

--------------------------------

### Backend Data Preparation for Chart.js

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-chartjs.md

Prepare chart data and options in your Ruby backend controller for dynamic rendering in the frontend. This involves serializing data into JSON format.

```ruby
class ChartsController < ApplicationController
  def index
    @chart_data = {
      labels: %w[January February March April May June July],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'transparent',
        borderColor: '#3B82F6',
        data: [37, 83, 78, 54, 12, 5, 99]
      }]
    }

    @chart_options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  end
end
```

--------------------------------

### Extending the Read More Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-read-more.md

Demonstrates how to extend the Stimulus Read More controller to add custom logic during connection, toggling, showing, or hiding events.

```javascript
import ReadMore from "@stimulus-components/read-more"

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

  // Function to override on toggle.
  toggle(event) {}

  // Function to override when the text is shown.
  show(event) {}

  // Function to override when the text is hidden.
  hide(event) {}
}
```

--------------------------------

### Register Stimulus Controller and Initialize Google Maps Callback

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/places-autocomplete/index.html

This snippet shows how to register the PlacesAutocomplete controller with your Stimulus application and set up a global callback for Google Maps initialization. Ensure the Google Maps API is loaded before this script runs.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import PlacesAutocomplete from "./src/index"

const application = Application.start()
application.register("places", PlacesAutocomplete)

window.initAutocomplete = function () {
  const event = new Event("google-maps-callback", { bubbles: true, cancelable: true })
  window.dispatchEvent(event)
}
```

--------------------------------

### Basic Dialog Modal Structure

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-dialog.md

This HTML structure sets up a modal using the Stimulus Dialog controller. It includes a dialog element and a button to open it. The backdropClose action is also configured.

```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>
```

--------------------------------

### Button Click with Hotkey

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-hotkey.md

This snippet demonstrates triggering a button click using a keyboard shortcut. The 'j' key is configured to activate the button.

```html
<button type="button" data-controller="hotkey" data-action="keydown.j@document->hotkey#click">Submit</button>
```

--------------------------------

### Extending the Content Loader Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-content-loader.md

Shows how to extend the Stimulus Content Loader controller to add custom behavior. The `connect` method is overridden to include additional logic.

```javascript
import ContentLoader from "@stimulus-components/content-loader"

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

--------------------------------

### Extending CheckboxSelectAll Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-checkbox-select-all.md

Demonstrates how to extend the base CheckboxSelectAll controller to add custom logic in the `connect` method. It shows how to access checked and unchecked checkboxes.

```javascript
import CheckboxSelectAll from "@stimulus-components/checkbox-select-all"

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

    // Get all checked checkboxes
    this.checked

    // Get all unchecked checkboxes
    this.unchecked
  }
}
```

--------------------------------

### ERB Usage with Rails Timeago Helper

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-timeago.md

Example of using the custom Rails timeago helper within an ERB template to display relative time for a project's creation date.

```erb
<p>Created <%= timeago(@project.created_at) %></p>
```

--------------------------------

### Adding a New Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/AGENTS.md

Instructions for adding a new Stimulus controller component to the monorepo. Covers copying an existing component, renaming, updating configurations, and integrating with documentation.

```bash
# Copy an existing component folder (e.g. `dropdown` or `character-counter`) under `components/<new-name>/`.
# Rename the class and controller identifier to match `<new-name>` (kebab → Pascal for class).
# Update `package.json`: `name: "@stimulus-components/<new-name>"`, scripts, and build `fileName`/`name`.
# Update `vite.config.mts`: entry, `name` (e.g. `StimulusDropdown`), `fileName`, and `external`/`globals` to match dependencies.
# Add the package to `docs/package.json` dependencies as `"@stimulus-components/<new-name>": "workspace:*"` if the docs should use it.
# Add docs and demos in `docs/` as needed (content + Vue demo components).
```

--------------------------------

### Extending the Stimulus Sound Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-sound.md

This JavaScript code shows how to extend the Stimulus Sound controller to add custom logic. The `connect` method is overridden to perform actions when the controller is connected and to access the underlying `HTMLAudioElement` instance.

```javascript
import Sound from "stimulus-sound"

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

    // The HTMLAudioElement instance.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement
    // You can fetch any attribute on it if needed.
    this.sound
  }
}
```

--------------------------------

### Extend Reveal Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-reveal-controller.md

Extend the Reveal controller to add custom behavior. Import the base controller and use `super.connect()` to ensure base functionality is preserved. Add custom logic within the `connect` method or override other lifecycle callbacks.

```javascript
import Reveal from "@stimulus-components/reveal"

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

--------------------------------

### Scroll To Link with Options

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-scroll-to.md

Configure scroll behavior and offset by setting data attributes on the anchor element. This allows for customized scrolling experiences.

```html
<a
  href="#awesome-stuff-here"
  data-controller="scroll-to"
  data-scroll-to-offset-value="150"
  data-scroll-to-behavior-value="auto"
>
  Scroll to #awesome-stuff-here
</a>

<h2 id="awesome-stuff-here">Awesome stuff here</h2>
```

--------------------------------

### Basic HTML Markup for Glow Effect

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-glow.md

Minimal HTML structure required to implement the Stimulus Glow controller. It includes the main container with `data-controller='glow'`, a child element with glow-related classes, and the glow overlay element.

```html
<div data-controller="glow" class="relative glow-capture">
  <div data-glow-target="child" class="glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]">
    <h2 class="font-bold text-2xl mb-4 text-gray-200 glow:text-glow/[.8]">Chicken Shawarma & Veggies</h2>

    <p class="text-sm text-gray-300 glow:text-glow">Vitae ducimus harum earum ratione autem esse ea!</p>

    <button class="glow:text-glow glow:border-glow glow:ring glow:ring-glow">Add to cart</button>
  </div>

  <div data-glow-target="overlay" class="glow-overlay" style="--glow-color: #f97316"></div>
</div>
```

--------------------------------

### Stimulus Color Picker Initialization

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/color-picker/index.html

Register the ColorPicker controller with your Stimulus application. Ensure all necessary CSS themes for Pickr are imported.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import ColorPicker from "./src/index"
import "@simonwep/pickr/dist/themes/classic.min.css"
import "@simonwep/pickr/dist/themes/monolith.min.css"
import "@simonwep/pickr/dist/themes/nano.min.css"

const application = Application.start()
application.register("color-picker", ColorPicker)
```

--------------------------------

### Stimulus Dropdown Controller with Customizations

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-dropdown.md

This JavaScript extends the base Stimulus Dropdown controller. It demonstrates how to override or extend the connect, toggle, and hide methods for custom behavior. Ensure the controller is imported correctly.

```javascript
import Dropdown from "@stimulus-components/dropdown"

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

  toggle(event) {
    super.toggle()
  }

  hide(event) {
    super.hide(event)
  }
}
```

--------------------------------

### Registering the Read More Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/read-more/index.html

This snippet shows how to import and register the ReadMore controller with your Stimulus application. Ensure this is part of your application's initialization.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import ReadMore from "./src/index"

const application = Application.start()
application.register("read-more", ReadMore)
```

--------------------------------

### Basic Stimulus Sortable List Usage

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-sortable.md

Initialize the Stimulus sortable controller on a list element. Animation is set to 150ms.

```html
<ul data-controller="sortable" data-sortable-animation-value="150">
  <li>Pet the cat</li>
  <li>Get the groceries</li>
</ul>
```

--------------------------------

### Extending Stimulus Timeago Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-timeago.md

Demonstrates how to extend the Stimulus Timeago controller to add custom logic in the connect method or to override the locale setting for date-fns.

```javascript
import Timeago from "stimulus-timeago"
import { fr } from "date-fns/locale"

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

  // You can override this getter to change the locale.
  // Don't forget to import it.
  get locale() {
    return fr
  }
}
```

--------------------------------

### Stimulus Action for Replacing Content

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/remote-rails/index.html

Use this Stimulus action with a link to replace the current element's content with content fetched from a remote URL. Ensure the remote URL returns HTML.

```html
<a data-action="remote#replace" href="/message.html">Click me to replace 👈</a>
```

--------------------------------

### Extending the TextareaAutogrow Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-textarea-autogrow.md

Extend the `TextareaAutogrow` controller to add custom behavior. The `connect` method can be overridden to include additional logic when the controller connects.

```javascript
import TextareaAutogrow from "stimulus-textarea-autogrow"

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

--------------------------------

### Ruby Controller for Handling Sortable Updates

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-sortable.md

Set up your controller to receive and process the updated parameters from the sortable list.

```ruby
class TodosController < ApplicationController
  def update
    # Do what you want with todo_params.
  end

  private

  def todo_params
    params.require(:todo).permit(:position)
  end
end
```

--------------------------------

### Input Focus with Hotkey

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-hotkey.md

Use this to focus on an input field when a specific key is pressed. The 'k' key is set as the hotkey for focusing the input.

```html
<input
  type="text"
  data-controller="hotkey"
  data-action="keydown.k@document->hotkey#focus"
  placeholder="Focus target (k)"
/>
```

--------------------------------

### HTML Structure for Stimulus Dropdown

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-dropdown.md

This HTML sets up a basic dropdown menu controlled by Stimulus. It includes a button to toggle the menu and a hidden div that displays the menu items. Data attributes link actions to the controller.

```html
<div data-controller="dropdown" class="relative">
  <button type="button" data-action="dropdown#toggle click@window->dropdown#hide">Options</button>

  <div
    data-dropdown-target="menu"
    class="hidden transition transform origin-top-right absolute right-0"
    data-transition-enter-from="opacity-0 scale-95"
    data-transition-enter-to="opacity-100 scale-100"
    data-transition-leave-from="opacity-100 scale-100"
    data-transition-leave-to="opacity-0 scale-95"
  >
    <a href="#" data-action="dropdown#toggle">Account settings</a>
    <a href="#" data-action="dropdown#toggle">Support</a>
    <a href="#" data-action="dropdown#toggle">License</a>
  </div>
</div>
```

--------------------------------

### Extend Scroll Progress Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-scroll-progress.md

Import and extend the ScrollProgress controller to add custom logic. The connect method can be overridden to perform actions when the controller connects.

```javascript
import ScrollProgress from "@stimulus-components/scroll-progress"

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

--------------------------------

### HTML Structure for Speech Recognition

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-speech-recognition.md

This HTML sets up the necessary elements for the Stimulus speech recognition controller, including a textarea for input and buttons to start/stop recording. The visibility of these elements is managed by CSS classes.

```html
<div data-controller="speech-recognition">
  <textarea data-speech-recognition-target="input" placeholder="Click Start and speak..."></textarea>

  <button
    type="button"
    data-speech-recognition-target="startButton"
    data-action="speech-recognition#start"
    class="hidden"
  >
    Start
  </button>

  <button
    type="button"
    data-speech-recognition-target="stopButton"
    data-action="speech-recognition#stop"
    class="hidden"
  >
    Stop
  </button>

  <span data-speech-recognition-target="indicator" class="hidden">Recording...</span>
</div>
```

--------------------------------

### Stimulus Action for Appending Content

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/remote-rails/index.html

Use this Stimulus action with a link to append content fetched from a remote URL. Ensure the remote URL returns HTML.

```html
<a data-action="remote#append" href="/message.html">Click me to append 👇</a>
```

--------------------------------

### Registering the Password Visibility Component

Source: https://github.com/stimulus-components/stimulus-components/blob/master/components/password-visibility/index.html

This snippet shows how to import and register the PasswordVisibility controller with your Stimulus application. Ensure the import path is correct for your project structure.

```javascript
import "../app.css"
import { Application } from "@hotwired/stimulus"
import PasswordVisibility from "./src/index"

const application = Application.start()
application.register("password-visibility", PasswordVisibility)
```

--------------------------------

### Controller for Comments

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-content-loader.md

Defines a controller to handle comments, rendering a partial with comments data.

```ruby
class PostsController < ApplicationController
  def comments
    render partial: 'posts/comments', locals: { comments: @post.comments }
  end
end
```

--------------------------------

### Ruby Model for Sortable List

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-sortable.md

Define your model to support list ordering, either using `acts_as_list` or a custom position system.

```ruby
class Todo < ApplicationRecord
  acts_as_list # Or with a custom position system.
end
```

--------------------------------

### Integrate Places Autocomplete Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-places-autocomplete.md

Use this HTML structure to integrate the `places-autocomplete` Stimulus controller. It includes an input field for search and hidden inputs to store various address components and coordinates. The `data-action` attribute links the `google-maps-callback` event to the controller's initialization method.

```html
<div
  data-controller="places-autocomplete"
  data-action="google-maps-callback@window->places-autocomplete#initAutocomplete"
  data-places-autocomplete-country-value='["fr"]'
>
  <input
    type="text"
    data-action="keydown->places-autocomplete#preventSubmit"
    data-places-autocomplete-target="address"
    placeholder="Search a location"
  />

  <input type="hidden" data-places-autocomplete-target="city" />
  <input type="hidden" data-places-autocomplete-target="streetNumber" />
  <input type="hidden" data-places-autocomplete-target="route" />
  <input type="hidden" data-places-autocomplete-target="county" />
  <input type="hidden" data-places-autocomplete-target="state" />
  <input type="hidden" data-places-autocomplete-target="postalCode" />
  <input type="hidden" data-places-autocomplete-target="country" />

  <input type="hidden" data-places-autocomplete-target="longitude" />
  <input type="hidden" data-places-autocomplete-target="latitude" />
</div>
```

--------------------------------

### Content Loader with Refresh Interval

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-content-loader.md

Loads content from the specified URL and automatically reloads it every 5000 milliseconds (5 seconds).

```html
<div
  data-controller="content-loader"
  data-content-loader-url-value="<%= comments_path %>"
  data-content-loader-refresh-interval-value="5000"
>
  This content will be reloaded every 5 seconds.
</div>
```

--------------------------------

### Load Google Maps API JavaScript

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-places-autocomplete.md

Include the Google Maps API JavaScript in your HTML's head section. Replace `{your_key_here}` with your actual API key. The `libraries=places` parameter is essential for autocomplete, and `callback=initAutocomplete` specifies the function to call once the API is loaded.

```html
<head>
  <script
    src="https://maps.googleapis.com/maps/api/js?key={your_key_here}&libraries=places&callback=initAutocomplete"
    async=""
    defer=""
  ></script>
</head>
```

--------------------------------

### Rails Links for Remote Actions

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-remote-rails.md

Demonstrates using `link_to` with the `remote: true` attribute and Stimulus data attributes to trigger remote actions like appending, prepending, or replacing content.

```erb
<%= link_to 'Click me to append content', content_path, remote: true, data: { controller: 'remote', action: 'ajax:success->remote#append' } %>

<%= link_to 'Click me to prepend content', content_path, remote: true, data: { controller: 'remote', action: 'ajax:success->remote#prepend' } %>

<%= link_to 'Click me to replace content', content_path, remote: true, data: { controller: 'remote', action: 'ajax:success->remote#replace' } %>
```

--------------------------------

### Extending the Password Visibility Controller

Source: https://github.com/stimulus-components/stimulus-components/blob/master/docs/content/docs/stimulus-password-visibility.md

This JavaScript snippet shows how to extend the PasswordVisibility controller. You can add custom logic in the `connect` and `toggle` methods.

```javascript
import PasswordVisibility from "@stimulus-components/password-visibility"

export default class extends PasswordVisibility {
  connect() {
    super.connect()

    // Do what you want here.
  }

  toggle(event) {
    super.toggle()

    // Do what you want here
  }
}
```
Tokens:
Raw