Hotwire Discussion

Introducing Stimulus-use a collection of composable behaviors

I have just release Stimulus-use a set of composable behaviors to enhance your controllers.

While the initial behaviors have been largely inspired by React-use let’s make it clear that Stimulus-use doesn’t require any React Hooks knowledge :sweat_smile: and is meant to be simple to use :grinning:.

Here is a typical example how you can easily add new lifecycles events to your controllers such as appear, disappear or resize

import { Controller } from 'stimulus'
import { useIntersection, useResize } from 'stimulus-use'

export default class extends Controller {
  connect() {

  appear(entry) {
    // triggered when the element appears within the viewport 
    // and receives an IntersectionObserverEntry object

  resized({ height, width }) {
    // trigered when the element is resized

I plan to had more behaviors in the future but before adding too much I wanted to make sure that the API is suitable. I will welcome all feedback, comments and contributions.

Hopefully as a community we can have a very strong foundation with Stimulus Core and some more agile composable enhancement within a structure such as Stimulus-use or other

Happy Stimulus



Here is an example to create an infinite scroll in a Rails app using the appear function


Lots of new mixins have been added to StimulusUse since launch. Today I released a new one useMeta.

This is a pattern I have been doing for quite some time. Put a few backend variables in meta fields (user_id, admin, feature_1) and then define in my ApplicationController some getters so that anywhere in my controllers I can have access to this.userId

useMeta package this pattern. Just provide a static metaNames array and getters are defined.



  <meta name="user_id" content="12345678">
  <meta name="admin" content="true">

Stimulus Controller

export default class extends Controller {
  static metaNames = ['user_id', 'admin']

  connect() {

    // individual getters
    this.userId         // 123456
    this.admin          // true

    // get all metas in one object
    this.metas // { userId: 123456, admin: true }

Full release note:

More read about Application Controller :


This is great! I’m looking forward to using useMeta when refactoring my project’s share buttons, for intance. Already using stimulus-use for throttling a scroll listener and I use useIntersection for all kinds of things. Thanks for the great work!

1 Like

Wow that’s awesome @adrienpoly! I’m really interested to read into how you did this. This could be really big for sharing behavior between classes. I have a few inheritence situations in my side project that could probably use some clean up.

Love know your team as well, great product.