Introducing Stimulus-use a collection of composable behaviors

1

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() {
    useIntersection(this)
    useResize(this)
  }

  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

Stimulus-use

11 Likes
2

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

2 Likes
3

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.

Example

HTML

<head>
  ...
  <meta name="user_id" content="12345678">
  <meta name="admin" content="true">
  ...
</head>

Stimulus Controller

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

  connect() {
    useMeta(this)

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

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

Full release note: https://github.com/stimulus-use/stimulus-use/releases/tag/v0.19.0

More read about Application Controller : https://www.betterstimulus.com/architecture/application-controller.html

2 Likes
4

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
5

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.