npmpackage.info

Gathering detailed insights and metrics for stimulus-use

Other packages similar to stimulus-use

stimulus-use-tinygesture

2.0.0

Tracks the user's gesture on an element using the tinygesture library.

stimulus-use-actions

0.1.0

Stimulus mixin for declaring actions in the controller

@lysyi3m/stimulus-use-validation

1.3.0

Lightweight, zero dependency, customizable mixin for Stimulus to handle form validation easily. Heavily rely on Constraint Validation API with support for custom validators.

@mguidetti/stimulus-components

1.2.0

[Stimulus](https://github.com/hotwired/stimulus) components used in my projects. Free to use and contributions welcome.

Gathering detailed insights and metrics for stimulus-use

stimulus-use - 0.52.3 | npmpackage.info

stimulus-use

A collection of composable behaviors for your Stimulus Controllers

0.52.3

1,629

MIT

JavaScript

166.84 kB

3.5

Installations

npm install stimulus-use

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Pull Requests

Open

10

Total

480

Closed

93

Merged

377

Issues

Open

28

Total

78

Closed

50

Releases

v0.52.3

Updated on Dec 15, 2024

v0.52.2

Updated on Dec 24, 2023

v0.52.1

Updated on Oct 15, 2023

v0.52.0

Updated on Feb 09, 2023

v0.51.3

Updated on Jan 14, 2023

v0.51.2

Updated on Jan 13, 2023

View All 58 releases

Languages

JavaScript

TypeScript

HTML

CSS

JavaScript (41.45%)

TypeScript (33.89%)

HTML (24.64%)

CSS (0.03%)

Developer

stimulus-use

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,629 Stars

685 Commits

70 Forks

14 Watchers

17 Branches

38 Contributors

Updated on Jul 09, 2025

Maintainers

View All 38 Contributors

Package Meta Information

Latest Version

0.52.3

Package Id

stimulus-use@0.52.3

Unpacked Size

166.84 kB

Size

31.25 kB

File Count

Published on

Dec 15, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

A collection of composable behaviors for your Stimulus Controllers

types included license

Stimulus Use Example

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 🌳🌳🌳

Getting Started

Stimulus 3

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.

Using npm

1npm i stimulus-use @hotwired/stimulus

Using yarn

1yarn add stimulus-use @hotwired/stimulus

Stimulus 2 and below

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.

Using npm

1npm i stimulus-use@0.41.0 stimulus@2.0.0

Using yarn

1yarn add stimulus-use@0.41.0 stimulus@2.0.0

Documentation

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

Mixins

Observers

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

Mixin	Description	NEW Callbacks
`useClickOutside`	Tracks the clicks outside of the element and adds a new lifecycle callback clickOutside.	`clickOutside`
`useHotkeys`	Registers hotkeys using the hotkeys-js library and binds them to handler methods
`useHover`	Tracks the user's mouse movements over an element and adds mouseEnter and mouseLeave callbacks to your controller.	`mouseEnter` `mouseLeave`
`useIdle`	Tracks if the user is idle on your page and adds away and back callbacks to your controller.	`away` `back`
`useIntersection`	Tracks the element's intersection and adds appear, disappear callbacks to your controller.	`appear` `disappear`
`useMatchMedia`	Tracks if the window matches a media query string.	`is[Name]`, `not[Name]` and `[name]Changed`
`useMutation`	Tracks mutations on an element, its attributes and/or subtree. Adds a mutate callback to your controller.	`mutate`
`useResize`	Tracks the element's size and adds a new lifecycle callback resize.	`resize`
`useTargetMutation`	Tracks when targets are added or removed from the controller's scope, or their contents changed. Adds [target]TargetAdded , [target]TargetRemoved and [target]TargetChanged callback to your controller for each specified target.	`[target]TargetAdded` `[target]TargetRemoved` `[target]TargetChanged`
`useVisibility`	Tracks the page visibility and adds visible, invisible callbacks to your controller.	`visible` `invisible`
`useWindowFocus`	Tracks the window focus and adds focus, unfocus callbacks to your controller.	`focus` `unfocus`
`useWindowResize`	Tracks the size of the `window` object and adds a new lifecycle callback windowResize.	`windowResize`

Optimization

A set of mixin to optimize performances.

Mixin	Description
`useDebounce`	Adds the ability to specify an array "debounces" of functions to debounce.
`useMemo`	Memoize expensive getters by mixing in `useMemo` and adding a static `memos` array.
`useThrottle`	Adds the ability to specify an array "throttles" of functions to throttle.

Animation

A set of mixin and controllers to build animations.

Mixin	Description
`useTransition`	Mixin or controller to apply classes to various stages of an element's transition.

Application

Mixin	Description
`useApplication, ApplicationController`	supercharged controller for your application.
`useDispatch`	Adds a dispatch helper function to emit custom events. Useful to communicate between different controllers.
`useMeta`	Adds getters to easily access meta values.

Extend or compose

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.

1import { Controller } from '@hotwired/stimulus'
2import { useIntersection, useResize } from 'stimulus-use'
3
4export default class extends Controller {
5  connect() {
6    useIntersection(this)
7    useResize(this)
8  }
9
10  appear(entry) {
11    // triggered when the element appears within the viewport
12  }
13
14  resize({ height, width }) {
15    // trigered when the element is resized
16  }
17}

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.

1import { IntersectionController } from 'stimulus-use'
2
3export default class extends IntersectionController {
4  appear(entry) {
5    // triggered when the element appears within the viewport
6  }
7}

Development

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

Contributors ✨

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

_{Marco Roth} 🚇 💻 👀 🐛	_{Philipp Daun} 🐛	_{M. E. Patterson} 🐛	_{Jonathan Sundqvist} 📖	_{Rui Freitas} 📖	_{Nicolas Filzi} 📖	_{Benjamin Darcet} 📖
_{juancarlosasensio} 📖	_lidqqq 🚇 🐛	_{Julian Rubisch} 💻 👀	_{Takuya Fukuju} 📖	_{Justin Coyne} 📖	_{Asger Behncke Jacobsen} 📖	_{Dan Callaghan} 📖
_{Konnor Rogers} 🐛 💻	_{Francisco Presencia} 📖	_{Takayuki Shimada} 🐛	_{Dylan Clarke} 💻 📖	_{Martin Tomov} 📖	_{Ryan Weaver} 📖 🐛	_{Adrien S} 🐛
_{Felix Albroscheit} 🐛	_{Guillaume Briday} 💻	_craisp 🐛 💻	_Gabriel 🐛 💻	_{Donnie Flood} 💻	_{Óscar Carretero} 👀 🐛	_{Ikko Ashimine} 📖
_{Michael Coyne} 🐛	_{Ollie Harridge} 📖	_{Leon Vogt} 🚇 💻	_{Thomas König} 📖	_Scott 🐛	_{Daniel Rikowski} 🐛	_{Marc Köhlbrugge} 🤔
_{Leon Vogt} 📖	_{Ted H. Tran} 📖	_{Romain Monteil} 💻

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

Acknowledgments

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

8

SAST

Determines if the project uses static code analysis.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dev-builds.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/dev-builds.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dev-builds.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/dev-builds.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/e2e.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/tests.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/treeshake.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/treeshake.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/treeshake.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/stimulus-use/stimulus-use/treeshake.yml/main?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to stimulus-use

Other packages similar to stimulus-use

stimulus-use

Installations

Developer Guide

Yes

CommonJS, ESM

Pull Requests

10

480

93

377

Issues

28

78

50

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Getting Started

Stimulus 3

Using npm

Using yarn

Stimulus 2 and below

Using npm

Using yarn

Documentation

Mixins

Observers

Optimization

Animation

Application

Extend or compose

Development

Contributors ✨

Acknowledgments

10

10

10

8

5

0

0

0

0

0

0

0

0

3.5

/10