@stardust-ui/react-component-event-listener

  • Version 0.40.0
  • Published
  • 13 kB
  • 2 dependencies
  • MIT license

Install

npm i @stardust-ui/react-component-event-listener
yarn add @stardust-ui/react-component-event-listener
pnpm add @stardust-ui/react-component-event-listener

Overview

React components for binding events on the global scope.

Index

Variables

variable documentRef

const documentRef: React.RefObject<Node | Window>;

    variable windowRef

    const windowRef: React.RefObject<Node | Window>;

      Functions

      function EventListener

      EventListener: typeof EventListener;

        function useEventListener

        useEventListener: <
        T extends
        | 'waiting'
        | 'error'
        | 'abort'
        | 'cancel'
        | 'progress'
        | 'ended'
        | 'change'
        | 'input'
        | 'select'
        | 'fullscreenchange'
        | 'fullscreenerror'
        | 'readystatechange'
        | 'visibilitychange'
        | 'animationcancel'
        | 'animationend'
        | 'animationiteration'
        | 'animationstart'
        | 'auxclick'
        | 'blur'
        | 'canplay'
        | 'canplaythrough'
        | 'click'
        | 'close'
        | 'contextmenu'
        | 'cuechange'
        | 'dblclick'
        | 'drag'
        | 'dragend'
        | 'dragenter'
        | 'dragexit'
        | 'dragleave'
        | 'dragover'
        | 'dragstart'
        | 'drop'
        | 'durationchange'
        | 'emptied'
        | 'focus'
        | 'gotpointercapture'
        | 'invalid'
        | 'keydown'
        | 'keypress'
        | 'keyup'
        | 'load'
        | 'loadeddata'
        | 'loadedmetadata'
        | 'loadend'
        | 'loadstart'
        | 'lostpointercapture'
        | 'mousedown'
        | 'mouseenter'
        | 'mouseleave'
        | 'mousemove'
        | 'mouseout'
        | 'mouseover'
        | 'mouseup'
        | 'pause'
        | 'play'
        | 'playing'
        | 'pointercancel'
        | 'pointerdown'
        | 'pointerenter'
        | 'pointerleave'
        | 'pointermove'
        | 'pointerout'
        | 'pointerover'
        | 'pointerup'
        | 'ratechange'
        | 'reset'
        | 'resize'
        | 'scroll'
        | 'securitypolicyviolation'
        | 'seeked'
        | 'seeking'
        | 'stalled'
        | 'submit'
        | 'suspend'
        | 'timeupdate'
        | 'toggle'
        | 'touchcancel'
        | 'touchend'
        | 'touchmove'
        | 'touchstart'
        | 'transitioncancel'
        | 'transitionend'
        | 'transitionrun'
        | 'transitionstart'
        | 'volumechange'
        | 'wheel'
        | 'copy'
        | 'cut'
        | 'paste'
        >(
        options: EventListenerOptions<T>
        ) => void;

          Interfaces

          interface EventListenerOptions

          interface EventListenerOptions<T extends EventTypes = 'click'> {}

            property capture

            capture?: boolean;
            • Indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.

            property listener

            listener: EventHandler<T>;
            • A function which receives a notification when an event of the specified type occurs.

            property targetRef

            targetRef: TargetRef;
            • A ref object with a target node.

            property type

            type: T;
            • A case-sensitive string representing the event type to listen for.

            Type Aliases

            type EventHandler

            type EventHandler<T extends EventTypes> = (e: DocumentEventMap[T]) => void;

              type EventTypes

              type EventTypes = keyof DocumentEventMap;

                type TargetRef

                type TargetRef = React.RefObject<Node | Window>;

                  Namespaces

                  namespace EventListener

                  namespace EventListener {}

                    variable defaultProps

                    var defaultProps: { capture: boolean };

                      variable displayName

                      var displayName: string;

                        variable propTypes

                        var propTypes:
                        | {
                        capture: PropTypes.Requireable<boolean>;
                        listener: PropTypes.Validator<(...args: any[]) => any>;
                        targetRef: PropTypes.Validator<any>;
                        type: PropTypes.Validator<
                        | 'waiting'
                        | 'error'
                        | 'abort'
                        | 'cancel'
                        | 'progress'
                        | 'ended'
                        | 'change'
                        | 'input'
                        | 'select'
                        | 'fullscreenchange'
                        | 'fullscreenerror'
                        | 'readystatechange'
                        | 'visibilitychange'
                        | 'animationcancel'
                        | 'animationend'
                        | 'animationiteration'
                        | 'animationstart'
                        | 'auxclick'
                        | 'blur'
                        | 'canplay'
                        | 'canplaythrough'
                        | 'click'
                        | 'close'
                        | 'contextmenu'
                        | 'cuechange'
                        | 'dblclick'
                        | 'drag'
                        | 'dragend'
                        | 'dragenter'
                        | 'dragexit'
                        | 'dragleave'
                        | 'dragover'
                        | 'dragstart'
                        | 'drop'
                        | 'durationchange'
                        | 'emptied'
                        | 'focus'
                        | 'gotpointercapture'
                        | 'invalid'
                        | 'keydown'
                        | 'keypress'
                        | 'keyup'
                        | 'load'
                        | 'loadeddata'
                        | 'loadedmetadata'
                        | 'loadend'
                        | 'loadstart'
                        | 'lostpointercapture'
                        | 'mousedown'
                        | 'mouseenter'
                        | 'mouseleave'
                        | 'mousemove'
                        | 'mouseout'
                        | 'mouseover'
                        | 'mouseup'
                        | 'pause'
                        | 'play'
                        | 'playing'
                        | 'pointercancel'
                        | 'pointerdown'
                        | 'pointerenter'
                        | 'pointerleave'
                        | 'pointermove'
                        | 'pointerout'
                        | 'pointerover'
                        | 'pointerup'
                        | 'ratechange'
                        | 'reset'
                        | 'resize'
                        | 'scroll'
                        | 'securitypolicyviolation'
                        | 'seeked'
                        | 'seeking'
                        | 'stalled'
                        | 'submit'
                        | 'suspend'
                        | 'timeupdate'
                        | 'toggle'
                        | 'touchcancel'
                        | 'touchend'
                        | 'touchmove'
                        | 'touchstart'
                        | 'transitioncancel'
                        | 'transitionend'
                        | 'transitionrun'
                        | 'transitionstart'
                        | 'volumechange'
                        | 'wheel'
                        | 'copy'
                        | 'cut'
                        | 'paste'
                        >;
                        }
                        | {
                        capture?: undefined;
                        listener?: undefined;
                        targetRef?: undefined;
                        type?: undefined;
                        };

                          Package Files (4)

                          Dependencies (2)

                          Dev Dependencies (2)

                          Peer Dependencies (2)

                          Badge

                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@stardust-ui/react-component-event-listener.

                          • Markdown
                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@stardust-ui/react-component-event-listener)
                          • HTML
                            <a href="https://www.jsdocs.io/package/@stardust-ui/react-component-event-listener"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>