@turbo-boost/elements
Advanced tools
Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.
Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.
Proudly sponsored by
>= 3.0>= 6.1>= 1.1>= 7.2>= 0.1.1>= 0.1.1Add TurboBoost Elements dependencies
# Gemfile
gem "turbo-rails", ">= 1.1", "< 2"
+gem "turbo_boost-elements", "~> VERSION"
# package.json
"dependencies": {
"@hotwired/turbo-rails": ">=7.2",
+ "@turbo-boost/elements": "^VERSION"
# app/javascript/application.js
import '@hotwired/turbo-rails'
+import '@turbo-boost/elements'
Add TurboBoost to your Rails app
# app/views/layouts/application.html.erb
<html>
<head>
+ <%= turbo_boost.meta_tag %>
</head>
<body>
</body>
</html>
<toggle-trigger> and <toggle-target>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 %>
toggle_trigger_tag
renders - REQUIRED, the partial path to rendermorphs - REQUIRED, dom_id of the partial's outermost containing elementcontrols - REQUIRED, dom_id of the toggle targetassigns - {}, assigns required to render the partial (i.e. instance variables)locals - {}, local_assigns required to render the paritalcollapse_selector - nil, CSS selector for other matching targets to collapse when the target is expandedfocus_selector - nil, CSS selector for the element to focus when the target is expandedmethod - :toggle, method to inovke (:show, :hide, :toggle)disabled - false, disable the triggerremember - false, remember ephemeral UI state between requestskwargs - generic support for additional element attributes like class etc.&block - a Ruby block that emits this trigger's contenttoggle_target_tag
id - REQUIRED, the dom_id for the elementcollapse_on - [], list of events that will collapse this targetcollapse_selector - nil, CSS selector for other matching targets to collapse when this target is expandedexpanded - false, override to force expansionfocus_selector - nil, CSS selector for the element to focus when this target is expandedkwargs - generic support for additional element attributes like class etc.&block - a Ruby block that emits this target's contentIf a named keyword argument is shared by both the trigger and target,
the trigger value will take precendence because multiple triggers might control the same target.
TurboBoost ships with client/browser based devtools designed to improve the developer experience. You can enable the devtools with JavaScript like so.
TurboBoost.devtools.start()
npm install and bundle to pick up the latestlib/turbo_boost/elements/version.rb - pre-release versions should use .preNapp/javascript/version.js - pre-release versions use -preNpackage.json - pre-release versions use -preNbin/standardizerake build and npm run buildrake releasenpm publish --access publicThe gem is available as open source under the terms of the MIT License.
FAQs
Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.
The npm package @turbo-boost/elements receives a total of 17 weekly downloads. As such, @turbo-boost/elements popularity was classified as not popular.
We found that @turbo-boost/elements demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.