Pre-built easy to use reactive TurboReflex behaviors for Rails/Hotwire apps.

Table of Contents

• Sponsors
• Dependencies
• Installation
• Setup
• Behaviors
  • Toggle
    • Tag Helpers
• Releasing
• License

Sponsors

Dependencies

• ruby >=2.7.3
• rails >=6.1
• turbo-rails >=1.1
• @hotwired/turbo >=7.2.0
• @hotwired/turbo-rails >=7.2.0
• turbo_ready >=0.1.2
• turbo_reflex >=0.0.28

Installation

Be sure to install the same version for each libary.

bundle add "reflex_behaviors --version VERSION"
yarn add "reflex_behaviors@VERSION --exact"

Setup

Import and intialize ReflexBehaviors in your application.

# Gemfile
gem "turbo-rails", ">= 1.1", "< 2"
+gem "reflex_behaviors", "~> VERSION"

# package.json
"dependencies": {
  "@hotwired/turbo-rails": ">=7.2",
+  "reflex_behaviors": "^VERSION"

# app/javascript/application.js
import '@hotwired/turbo-rails'
+import 'reflex_behaviors'

Behaviors

Toggle

Toggle content via conditional rendering.

This example will re-render the post partial and toggle the form section.

<!-- app/views/posts/_post.html.erb -->
<%= tag.div id: dom_id(post) do %>
  <!-- content -->

  <%= toggle_trigger_tag renders: current_partial_path, morphs: dom_id(post),
    controls: dom_id(post, :form), locals: local_assigns, assigns: { post: @post }) do %>
    <% if toggle_target_collapsed?  dom_id(post, :form) %>
      <%= link_to "Edit Post Inline", request.path %>
    <% else %>
      <%= link_to "Cancel Editing Post", request.path %>
    <% end %>
  <% end %>

  <%= toggle_target_tag dom_id(post, :form) do %>
    <%= render "posts/form", post: post %>
  <% end %>

  <!-- content -->
<% end %>

Tag Helpers

• toggle_trigger_tag

  • renders - REQUIRED, the partial path to render
  • morphs - REQUIRED, dom_id of the partial's outermost containing element
  • controls - REQUIRED, dom_id of the toggle target
  • assigns - {}, assigns required to render the partial i.e. instance variables
  • locals - {}, local_assigns required to render the parital
  • collapse_selector - nil, CSS selector for other targets to collapse when the target is expanded
  • focus_selector - nil, CSS selector for the element to focus when the target is expanded
  • method - :toggle, reflex method to inovke (:show, :hide, :toggle)
  • disabled - false, disable the trigger
  • remember - false, remember state between requests
  • kwargs - generic support for additional element attributes like class etc.
  • &block - a Ruby block that emits the rendered content

• toggle_target_tag

  • id - REQUIRED, the dom_id for the element
  • collapse_on - [], list of events that trigger collapse
  • collapse_selector - nil, CSS selector for other targets to collapse when this target is expanded
  • expanded - false, override to force expansion
  • focus_selector - nil, CSS selector for the element to focus when content is expanded
    • kwargs - generic support for additional element attributes like class etc.
    • &block - a Ruby block that emits the rendered content

Releasing

1. Run yarn and bundle to pick up the latest
2. Bump version number at lib/reflex_behaviors/version.rb. Pre-release versions use .preN
3. Run rake build and yarn build
4. Run bin/standardize
5. Commit and push changes to GitHub
6. Run rake release
7. Run yarn publish --no-git-tag-version
8. Yarn will prompt you for the new version. Pre-release versions use -preN
9. Commit and push changes to GitHub
10. Create a new release on GitHub (here) and generate the changelog for the stable release for it

License

The gem is available as open source under the terms of the MIT License.