width-check.js

main.js

import widthCheck from './_app/width-check'

// Test Functions
const testFunc1 = () => {
  console.log('test func 1')
}

const testFunc2 = () => {
  console.log('test func 2')
}

widthCheck({
  breakpoint: 650,
  aboveFunction: testFunc1,
  belowFunction: testFunc2
})

width-check.js

import throttle from 'lodash/throttle'
import mixin from 'lodash/mixin'
import _ from 'lodash/wrapperLodash'
mixin(_, { throttle: throttle })

export default function widthCheck (config) {
  let isSmall = true
  const af = config.aboveFunction.toString()
  const bf = config.belowFunction.toString()
  const wwC = (w, af, bf) => {
    let ww = window.innerWidth
    if (ww >= w && isSmall) {
      const asFuncAf = eval('(' + af + ')')
      asFuncAf()
      isSmall = false
    } else if (ww < w && !isSmall) {
      const asFuncBf = eval('(' + bf + ')')
      asFuncBf()
      isSmall = true
    }
  }
  wwC(config.breakpoint, af, bf)
  window.addEventListener('resize', _.throttle(function () {
    wwC(config.breakpoint, af, bf)
  }, 50))
}