Welcome to Reflex Behaviors 👋

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

Table of Contents

- [Sponsors](#sponsors)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Setup](#setup)
- [Behaviors](#behaviors)
- [Toggle](#toggle)
  - [Tag Helpers](#tag-helpers)
- [Releasing](#releasing)
- [License](#license)

Sponsors

Proudly sponsored by

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.