use-resize.md

useResize

Adds one new behavior to your Stimulus controller : resize

This behavior is built on top of the Resize Observer API.

Reference

useResize(controller, options = {})

controller : a Stimulus Controller (usually 'this')

options :

Option	Description	Default value
dispatchEvent	Whether to dispatch a resize event or not.	true
element	The root element being observed for resize.	The controller element
eventPrefix	Whether to prefix or not the emitted event. Can be a boolean or a string. - true prefix the event with the controller identifier card:resize - someString prefix the event with the given string someString:resize - false to remove prefix	true

Usage

Composing

import { Controller } from '@hotwired/stimulus'
import { useResize } from 'stimulus-use'

export default class extends Controller {
  static targets = ['width']

  connect() {
    useResize(this)
  }

  resize({ width }) {
    this.widthTarget.textContent = width
  }
}

Extending a controller

import { ResizeController } from 'stimulus-use'

export default class extends ResizeController {
  static targets = ['width']

  resize({ width }) {
    this.widthTarget.textContent = width
  }
}

Polyfill

ResizeObserver is quite widely supported by modern browsers can I use. To support older browsers such as IE11 you need a polyfill.

https://github.com/juggle/resize-observer