@sparing-software/vue-on-resize
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • 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

    28

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    9.57 kB

    Total Files

    8

    Last publish

    Collaborators

    • vladyslavprosolupovsparing
    • adrianklimek