# All files / src/_hooks EventListener.ts

93.33% Statements 56/60
78.37% Branches 29/37
100% Functions 10/10
92% Lines 46/50

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    16384x

    15219x
    15219x

    84x
    176x
    176x
    176x
    176x
    176x
    176x

    176x

    176x

    176x

    176x

    176x
    93x

    93x

    93x
    93x

    93x

    84x
    14444x
    14444x
    14444x
    14444x
    14444x
    14444x

    14444x
    4x
    14440x

    14444x

    14444x

    14444x
    7009x
    3607x

    3402x

    3402x
    3402x

    3402x

    84x
    14620x
    14620x

    14620x

    14620x
    7647x

    14620x

     import React from 'react'

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export type Scope =
      | Window
      | React.RefObject<HTMLElement>
      | React.RefObject<HTMLElement>[]

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export interface Config {
      /**
       * @since 10.19.0
       */
      dependencies?: any[]
      /**
       * @since 10.19.0
       */
      event: string
      /**
       * @since 10.19.0
       */
      handler: React.EventHandler<any>
      /**
       * @since 10.19.0
       */
      options?: AddEventListenerOptions
      /**
       * @since 10.19.0
       */
      scope?: Scope
      /**
       * @since 10.19.0
       */
      noopHandler?: boolean
    }

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export interface EventCallbackConfig {
      /**
       * @since 10.19.0
       */
      handler: React.EventHandler<any>
      /**
       * @since 10.19.0
       */
      dependencies?: Array<any>
    }

    // TODO this is kind of hacky and just to satisfy gatsby. There are other usages of
    // window in the library which don't trigger this error, so we should probably figure
    // out what's going on here
    function getWindow() {
      if (typeof window !== 'undefined') {
        return window
      }
    }

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function useLayoutEventListener({
      dependencies = [],
      event,
      handler,
      options = {},
      scope,
      noopHandler = false,
    }: Config) {
      Iif (!event) {
        console.warn(`"event" option missing, no listeners added`)
      } else Iif (!handler) {
        console.warn(`"handler" option missing, no listeners added`)
      }

      const actualScope =
        scope === getWindow() || !scope
          ? { current: getWindow() }
          : (scope as React.RefObject<HTMLElement>) || {}

      const listener = useEventCallback({ handler, dependencies })

      React.useLayoutEffect(() => {
        Iif (noopHandler) {
          return
        }

        const { current } = actualScope

        if (current) {
          current.addEventListener(event, listener, options)

          return () => current.removeEventListener(event, listener, options)
        }
      }, [noopHandler, event, listener, actualScope.current])
    }

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function useEventListener({
      dependencies = [],
      event,
      handler,
      options = {},
      scope,
      noopHandler = false,
    }: Config) {
      if (!event) {
        console.warn(`"event" option missing, no listeners added`)
      } else Iif (!handler) {
        console.warn(`"handler" option missing, no listeners added`)
      }

      const actualScope =
        scope === getWindow() || !scope
          ? { current: getWindow() }
          : (scope as React.RefObject<HTMLElement>) || {}

      const listener = useEventCallback({ handler, dependencies })

      React.useEffect(() => {
        if (noopHandler) {
          return
        }

        const { current } = actualScope

        if (current) {
          current.addEventListener(event, listener, options)

          return () => current.removeEventListener(event, listener, options)
        }
      }, [noopHandler, event, listener, actualScope.current])
    }

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function useEventCallback({
      handler,
      dependencies = [],
    }: EventCallbackConfig): React.EventHandler<any> {
      const ref = React.useRef(handler)

      React.useLayoutEffect(() => {
        ref.current = handler
      }, [handler, ...dependencies])

      return React.useCallback((event) => ref.current(event), [])
    }