How to use @pluginjs/breakpoints - 10 common examples

if (options.resizeReference === 'self') {
      this.$rely = this.instance.element
    } else if (
      options.resizeReference !== 'window' &&
      /* eslint no-magic-numbers: ["error", { "ignore": [0] }]*/
      query(options.resizeReference).length > 0
    ) {
      this.$rely = query(options.resizeReference)
    }

    this.effects = {
      in: options.responsiveEffect,
      out: this.revertClass(options.responsiveEffect)
    }

    if (Breakpoints.is(`${this.breakpoint}-`)) {
      this.toggle(true)
    }
  }

initBreakpoints() {
    Breakpoints.init()
    if (Breakpoints.all().includes(this.options.breakpoint)) {
      const breakpoint = this.options.breakpoint
      const that = this
      if (Breakpoints.is(`${breakpoint}-`)) {
        addClass(this.classes.RESPONSIVE, this.element)
      }
      Breakpoints.to(breakpoint, {
        enter() {
          addClass(that.classes.RESPONSIVE, that.element)
        },
        leave() {
          removeClass(that.classes.RESPONSIVE, that.element)
        }
      })
    }
  }

initBreakpoints() {
    Breakpoints.init()

    const screens = Breakpoints.all()
    this.initScreenOptions(screens)
    const that = this
    const currentName = Breakpoints.current().name

    if (this.screenOptions[currentName]) {
      Object.keys(this.screenOptions[currentName]).forEach(key => {
        this[key] = this.screenOptions[currentName][key]
      })
    }

    Breakpoints.on('change', function() {
      if (that.screenOptions[this.current.name]) {
        Object.keys(that.screenOptions[this.current.name]).forEach(key => {
          that[key] = that.screenOptions[this.current.name][key]

initPlacement() {
    Breakpoints.init()

    let prevPlacement = null
    const setupPlacement = placement => {
      if (prevPlacement) {
        removeClass(
          this.getClass(
            this.classes.OUTSIDEPLACEMENT,
            'placement',
            prevPlacement
          ),
          this.$wrap
        )
      }
      addClass(
        this.getClass(this.classes.OUTSIDEPLACEMENT, 'placement', placement),
        this.$wrap

initBreakpoints() {
    Breakpoints.init()
    this.breakpoint = this.instance.options.breakpoint
    const that = this
    Breakpoints.to(that.breakpoint, {
      enter() {
        that.instance.enter('responsive')
        that.toggle(true)
      },
      leave() {
        that.instance.leave('responsive')
        that.toggle(false)
      }
    })
  }

initBreakpoints() {
    Breakpoints.init()
    this.breakpoint = this.instance.options.breakpoint
    const that = this
    Breakpoints.to(that.breakpoint, {
      enter() {
        that.resetHeight(true)
        that.toggle(true)
      },
      leave() {
        that.toggle(false)
      }
    })
  }

initBreakpoints() {
    Breakpoints.init()
    if (Breakpoints.all().includes(this.options.breakpoint)) {
      const breakpoint = this.options.breakpoint
      const that = this
      if (Breakpoints.is(`${breakpoint}-`)) {
        addClass(this.classes.RESPONSIVE, this.element)
      }
      Breakpoints.to(breakpoint, {
        enter() {
          addClass(that.classes.RESPONSIVE, that.element)
        },
        leave() {
          removeClass(that.classes.RESPONSIVE, that.element)
        }
      })
    }
  }

initBreakpoints() {
    Breakpoints.init()
    if (Breakpoints.all().includes(this.options.breakpoint)) {
      const breakpoint = this.options.breakpoint
      const that = this
      if (Breakpoints.is(`${breakpoint}-`)) {
        addClass(this.classes.RESPONSIVE, this.element)
      }
      Breakpoints.to(breakpoint, {
        enter() {
          addClass(that.classes.RESPONSIVE, that.element)
        },
        leave() {
          removeClass(that.classes.RESPONSIVE, that.element)
        }
      })
    }
  }

initBreakpoints() {
    Breakpoints.init()
    if (Breakpoints.all().includes(this.options.breakpoint)) {
      const breakpoint = this.options.breakpoint
      const that = this
      if (Breakpoints.is(`${breakpoint}-`)) {
        addClass(this.classes.RESPONSIVE, this.element)
      }
      Breakpoints.to(breakpoint, {
        enter() {
          addClass(that.classes.RESPONSIVE, that.element)
        },
        leave() {
          removeClass(that.classes.RESPONSIVE, that.element)
        }
      })
    }
  }

initBreakpoints() {
    Breakpoints.init()

    const screens = Breakpoints.all()
    this.initScreenOptions(screens)

    const that = this
    const currentName = Breakpoints.current().name

    if (this.screenOptions[currentName]) {
      Object.keys(this.screenOptions[currentName]).forEach(key => {
        this[key] = this.screenOptions[currentName][key]
      })
    }

    Breakpoints.on('change', function() {
      if (that.screenOptions[this.current.name]) {
        Object.keys(that.screenOptions[this.current.name]).forEach(key => {
          that[key] = that.screenOptions[this.current.name][key]
        })