Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

stimulus-use

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stimulus-use

A collection of standard controllers and utilities for Stimulus

  • 0.23.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
82K
increased by10.72%
Maintainers
1
Weekly downloads
 
Created
Source

A collection of composable behaviors for your Stimulus Controllers

npm version minified + gzip size types included types included Sauce test status


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

npm

npm i stimulus-use

yarn

yarn add stimulus-use

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.

MixinDescriptionNEW Callbacks
useClickOutsideTracks the clicks outside of the element and adds a new lifecycle callback clickOutside.clickOutside
useHoverTracks the user's mouse movements over an element and adds mouseEnter and mouseLeave callbacks to your controller.mouseEnter mouseLeave
useIdleTracks if the user is idle on your page and adds away and back callbacks to your controller.away
back
useIntersectionTracks the element's intersection and adds appear, disappear callbacks to your controller.appear
disappear
useMutationTracks mutations on an element, its attributes and/or subtree. Adds a mutate callback to your controller.mutate
useResizeTracks the element's size and adds a new lifecycle callback resize.resize
useTargetMutationTracks 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
useWindowResizeTracks the size of the window object and adds a new lifecycle callback windowResize.windowResize

Optimization

A set of mixin to optimize performances.

MixinDescription
useDebounceAdds the ability to specify an array "debounces" of functions to debounce.
useMemoMemoize expensive getters by mixing in useMemo and adding a static memos array.
useThrottleAdds the ability to specify an array "throttles" of functions to throttle.

Animation

A set of mixin and controllers to build animations.

MixinDescription
useTransitionMixin or controller to apply classes to various stages of an element's transition.

Application

MixinDescription
useApplication, ApplicationControllersupercharged controller for your application.
useDispatchAdds a dispatch helper function to emit custom events. Useful to communicate between different controllers.
useMetaAdds 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.

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
  }

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

Contributors ✨

Made with :heart: by @adrienpoly 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

📖

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

Acknowledgments

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

Testing Powered By SauceLabs

FAQs

Package last updated on 25 Jan 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc