website·Indexed 33 days ago
https://www.stimulus-components.com/docsA collection of over 25 Stimulus controllers with built-in behavior that allow developers to craft components with their own styles. Available components include Popover, Confirmation, Hotkey, Lightbox, Remote Rails, Content Loader, Auto Submit, Dialog, Character Counter, Password Visibility, Scroll Progress, Sortable, Read More, Scroll To, Speech Recognition, Glow, Textarea Autogrow, Carousel, Scroll Reveal, Places Autocomplete, Clipboard, Timeago, Dropdown, Rails Nested Form, Notification, Chartjs, Color Picker, Animated Number, Reveal Controller, Checkbox Select All, Sound, and Prefetch.
You can extend the PlacesAutocomplete class to customize behavior. You can override initAutocomplete and placeChanged methods, or define autocompleteOptions to specify which Google Maps fields to return (e.g., address_components, geometry).
When overriding lifecycle methods like connect() or disconnect(), always call super.method() to ensure the base functionality is preserved. The Google Maps Autocomplete instance is available via this.autocomplete.
import PlacesAutocomplete from "stimulus-places-autocomplete"
export default class extends PlacesAutocomplete {
connect() {
super.connect()
console.log("Custom logic here.")
// Access the google.maps.places.Autocomplete instance
console.log(this.autocomplete)
}
initAutocomplete() {
super.initAutocomplete()
}
placeChanged() {
super.placeChanged()
}
get autocompleteOptions() {
return {
fields: ["address_components", "geometry"],
}
}
}To implement dynamic nested forms, you must configure your Rails model to accept nested attributes, permit the attributes in the controller, and set up the view with a template for new records and a target for injection.
Key requirements:
accepts_nested_attributes_for with allow_destroy: true.:id and :_destroy.<template> tag with data-nested-form-target="template" containing the fields for a new record. Use child_index: 'NEW_RECORD' to allow the controller to replace the index with a unique value.data-nested-form-target="target" where new fields will be injected.data-action="nested-form#add" on the add button and data-action="nested-form#remove" on the remove button.# app/models/user.rb
class User < ApplicationRecord
has_many :todos
accepts_nested_attributes_for :todos, reject_if: :all_blank, allow_destroy: true
end
# app/controllers/users_controller.rb
def user_params
params.require(:user).permit(todos_attributes: [:id, :_destroy, :description])
end<%# app/views/users/edit.html.erb %>
<%= form_with model: @user, data: { controller: 'nested-form', nested_form_wrapper_selector_value: '.nested-form-wrapper' } do |f| %>
<template data-nested-form-target="template">
<%= f.fields_for :todos, Todo.new, child_index: 'NEW_RECORD' do |todo_fields|
<%= render "todo_form", f: todo_fields %>
<% end %>
</template>
<%= f.fields_for :todos do |todo_fields| %>
<%= render "todo_form", f: todo_fields %>
<% end %>
<div data-nested-form-target="target"></div>
<button type="button" data-action="nested-form#add">Add todo</button>
<%= f.submit 'Save todos' %>
<% end %>
<%# app/views/users/_todo_form.html.erb %>
<div class="nested-form-wrapper" data-new-record="<%= f.object.new_record? %>">
<%= f.label :description %>
<%= f.text_field :description %>
<button type="button" data-action="nested-form#remove">Remove todo</button>
<%= f.hidden_field :_destroy %>
</div>@stimulus-components/auto-submit package and register it within your Stimulus application to enable automatic form submission capabilities.yarn add @stimulus-components/auto-submitimport { Application } from '@hotwired/stimulus'
import AutoSubmit from '@stimulus-components/auto-submit'
const application = Application.start()
application.register('auto-submit', AutoSubmit)Remote controller by creating a new class that inherits from it. When overriding lifecycle methods like connect() or disconnect(), call super.method() to ensure the base functionality of the parent class is executed.// app/javascript/controllers/remote_rails_controller.js
import Remote from "@stimulus-components/remote-rails"
export default class extends Remote {
connect() {
super.connect()
console.log("Custom logic executed after parent connect.")
}
}Dialog base class to override behavior for opening, closing, or backdrop interactions. When overriding lifecycle methods like connect() or disconnect(), call super.method() to ensure the base component logic is executed.import Dialog from "@stimulus-components/dialog"
export default class extends Dialog {
connect() {
super.connect()
console.log("Custom connection logic")
}
// Override these methods to customize behavior
open() {}
close() {}
backdropClose() {}
}@stimulus-components/hotkey package and register it within your Stimulus application to enable keyboard shortcut triggers for element clicks and focus.yarn add @stimulus-components/hotkeyimport { Application } from '@hotwired/stimulus'
import Hotkey from '@stimulus-components/hotkey'
const application = Application.start()
application.register('hotkey', Hotkey)@stimulus-components/rails-nested-form package and register it as a Stimulus controller (typically as nested-form) to enable dynamic nested fields in your Rails application.# Install via yarn
yarn add @stimulus-components/rails-nested-form// app/javascript/controllers/index.js
import { Application } from '@hotwired/stimulus'
import RailsNestedForm from '@stimulus-components/rails-nested-form'
const application = Application.start()
application.register('nested-form', RailsNestedForm)@stimulus-components/scroll-progress package and register it with your Stimulus application to enable scroll progress bar functionality.# Install via yarn
yarn add @stimulus-components/scroll-progress// app/javascript/controllers/index.js
import { Application } from '@hotwired/stimulus'
import ScrollProgress from '@stimulus-components/scroll-progress'
const application = Application.start()
application.register('scroll-progress', ScrollProgress)TextareaAutogrow class to add custom behavior. When overriding lifecycle methods like connect() or disconnect(), you must call super.method() to ensure the original autogrow functionality is preserved.// app/javascript/controllers/textarea_autogrow_controller.js
import TextareaAutogrow from "stimulus-textarea-autogrow"
export default class extends TextareaAutogrow {
connect() {
super.connect()
console.log("Custom logic executed here.")
}
}Hotkey controller using inheritance to add custom logic to the click or focus methods. When overriding methods like connect, disconnect, or the action methods, call super.method() to ensure the original parent functionality is preserved.import Hotkey from "@stimulus-components/hotkey"
export default class extends Hotkey {
click(event) {
super.click(event)
console.log("Custom logic after click")
}
focus(event) {
super.focus(event)
}
}