Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@sparing-software/vue-on-resize

1.0.2 • Public • Published

Vue on resize

MIT license Downloads number JavaScript Style Guide

Vue plugin for resize handlers.

Reduce your old code:

mounted () {
  const resizeHandler = e => {
    // handler code
  }
  resizeHandler()
  
  const debouncedHandler = debounce(resizeHandler, 250)
  window.addEventListener('resize', debouncedHandler)
  this.$once('hook:beforeDestroy', () => {
    window.removeEventListener('resize', debouncedHandler)
  })
}

to simple:

mounted () {
  this.$onResize(width => {
    // ... handler code
  }).fire()
}

Installation

Install package in your project

$ npm install @sparing-software/vue-on-resize

Configuration

import Vue from 'vue'
import VueOnResize from '@sparing-software/vue-on-resize'
 
Vue.use(VueOnResize)

Examples

Simple usage:

mounted () {
  this.$onResize(width => {
    // ... handler code
  })
}

Immediately execute callback:

mounted () {
  this.$onResize(width => {
    // ... handler code
  }).fire()
}

Programmatically execute callback:

mounted () {
  const resizeHandler = this.$onResize(width => {
     // ... handler code
  }).fire()
 
  resizeHandler.fire()
}

Custom debounce time (default 250ms):

mounted () {
  this.$onResize(width => {
    // ... handler code
  }, 100)
}

Get more info about resize event:

mounted () {
  this.$onResize((windowWidth, windowHeight, event) => {
    // ... handler code
  })
}

Contributing

Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!

License

MIT License © Sparing Interactive

Install

npm i @sparing-software/vue-on-resize

DownloadsWeekly Downloads

14

Version

1.0.2

License

MIT

Unpacked Size

5.45 kB

Total Files

6

Last publish

Collaborators

  • avatar
  • avatar
  • avatar