stimulus-use/stimulus-use: A collection of composable behaviors for your Stimulus Controllers

• New lifecycle behaviors: adds new standard behaviors to your Stimulus controllers.
• Composable: compose at will different behaviors in a single controller with mixins.
• Modular: built as ES6 modules, just import what you need and tree shaking will remove the rest.
• Typescript: Types available, better autocompletion.
• Tiny: 3k gzip + tree shaking 🌳🌳🌳

If you want to use stimulus-use with Stimulus 3 you can use the version 0.50.0+. This and all future versions are designed to work with the @hotwired/stimulus npm package.

Note: If other packages still depend on the stimulus npm package you can safely keep that in your package.json, this won’t break the stimulus-use compability.

npm i stimulus-use @hotwired/stimulus

yarn add stimulus-use @hotwired/stimulus

If you want to use stimulus-use with Stimulus 2 (or below) you can use version 0.41.0. This version is designed to work with the stimulus npm package.

npm i stimulus-use@0.41.0 stimulus@2.0.0

yarn add stimulus-use@0.41.0 stimulus@2.0.0

We got you covered 👉 stimulus-use.github.io/stimulus-use

This set of mixins is built around the Observer APIs and custom events to enhance your controllers with new behaviors.

A set of mixin to optimize performances.

A set of mixin and controllers to build animations.

Stimulus-use can be used in two ways: composing with mixins or extending built-in controllers

Composing with mixins

This is the prefered approach as it bring the most flexibility. Simply import a mixin and apply it in the connect or initialize to adds new behaviors to you controller. You can combine several mixins within the same controller.

import { Controller } from '@hotwired/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
  }

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

Extending built-in controllers

You can create your Stimulus controller from a pre-built Stimulus-use controller which offers the new behavior you’re looking for.
This method works perfectly when you only need a single behavior for your controller.

import { IntersectionController } from 'stimulus-use'

export default class extends IntersectionController {
  appear(entry) {
    // triggered when the element appears within the viewport
  }
}

• Fork the project locally
• yarn install
• yarn start – to run the local dev server with examples
• yarn test – to run the unit tests
• yarn lint – to run the linter with ESLint
• yarn format – to format changes with Prettier
• yarn build – to bundle the app into static files for production

Made with ❤️ by @adrienpoly, @marcoroth and all these wonderful contributors (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Continuous integration and cross browser testing is generously provided Sauce Labs.

Keep your files stored safely and securely with the SanDisk 2TB Extreme Portable SSD. With over 69,505 ratings and an impressive 4.6 out of 5 stars, this product has been purchased over 8K+ times in the past month. At only $129.99, this Amazon’s Choice product is a must-have for secure file storage.

Help keep private content private with the included password protection featuring 256-bit AES hardware encryption. Order now for just $129.99 on Amazon!