Components

Remote Rails

GitHub

A Stimulus controller to handle Rails UJS events.

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/remote-rails

  2. Register the controller in your application

    app/javascript/controllers/index.js
    import { Application } from '@hotwired/stimulus'
import RemoteRails from '@stimulus-components/remote-rails'

const application = Application.start()
application.register('remote', RemoteRails)

Example

Remote Rails

Click me to prepend ☝️
Click me to append 👇

Usage

app/controllers/comments_controller.rb
class CommentsController < ApplicationController
  def create
    @comment = Comment.new(comment_params)

    if @comment.save
      render @comment
    else
      render partial: 'comments/form', locals: { comment: @comment }, status: :unprocessable_entity
    end
  end

  private

  def comment_params
    params
      .require(:comment)
      .permit(:content)
  end
end
app/views/comments/edit.html.erb
<%= form_with model: @comment, data: { controller: 'remote', action: 'ajax:success->remote#append ajax:error->remote#replace' } do |f| %>
  <% if f.object.errors.any? %>
    <% f.object.errors.full_messages.each do |error| %>
      <p><%= error %></p>
    <% end %>
  <% end %>

  <%= f.label :content %>
  <%= f.text_field :content %>

  <%= f.submit 'Save comment' %>
<% end %>

With a link_to:

app/views/comments/index.html.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' } %>

You can use append, prepend or replace methods with the events of your choice.

Don't forget to add the remote: true attribute in your link_to!

You can use it with all remote elements available in Rails UJS.

Extending Controller

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

app/javascript/controllers/remote_rails_controller.js
import Remote from "stimulus-remote-rails"

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

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.