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
useLazyLoad	Lazily loads an image once it scrolls into the viewport and adds loading, loaded callbacks to your controller.	loading loaded
useMatchMedia	Tracks if the window matches the given media query strings.	is[Name] not[Name] [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