phoenix_live_view
    Preparing search index...

    Class ViewHook<E>

    Base class for LiveView hooks. Users extend this class to define their hooks.

    Example:

    class MyCustomHook extends ViewHook {
      myState = "initial";

      mounted() {
        console.log("Hook mounted on element:", this.el);
        this.el.addEventListener("click", () => {
          this.pushEvent("element-clicked", { state: this.myState });
        });
      }

      updated() {
        console.log("Hook updated", this.el.id);
      }

      myCustomMethod(someArg: string) {
        console.log("myCustomMethod called with:", someArg, "Current state:", this.myState);
      }
    }

    The this context within the hook methods (mounted, updated, custom methods, etc.) will refer to the hook instance, providing access to this.el, this.liveSocket, this.pushEvent(), etc., as well as any properties or methods defined on the subclass.

    Type Parameters

    • E extends HTMLElement = HTMLElement

    Implements

    Index

    Properties

    el

    Accessors

    liveSocket

    Methods

    beforeUpdate destroyed disconnected handleEvent js mounted pushEvent pushEventTo reconnected removeHandleEvent updated upload uploadTo

    Properties

    el: E

    The DOM element that the hook is attached to.

    Accessors

    Methods

    • The beforeUpdate callback.

      Called when the element is about to be updated in the DOM. Note: any call here must be synchronous as the operation cannot be deferred or cancelled.

      Returns void

    • The destroyed callback.

      Called when the element has been removed from the page, either by a parent update, or by the parent being removed entirely.

      Returns void

    • The disconnected callback.

      Called when the element's parent LiveView has disconnected from the server.

      Returns void

    • Allows to register a callback to be called when an event is received from the server.

      This is used to handle pushEvent calls from the server. The callback is called with the payload from the server.

      Parameters

      • event: string

        The event name.

      • callback: (payload: any) => any

        The callback to call when the event is received.

      Returns CallbackRef

      A reference to the callback, which can be used in removeHandleEvent to remove the callback.

    • The mounted callback.

      Called when the element has been added to the DOM and its server LiveView has finished mounting.

      Returns void

    • Pushes an event to the server and invokes a callback with the server's reply.

      Note: this version silently ignores push errors. Use the promise-returning version to handle errors.

      Parameters

      • event: string

        The event name.

      • payload: any

        The payload to send to the server. Defaults to an empty object.

      • onReply: OnReply

        A callback to handle the server's reply.

      Returns void

    • Pushes an event to the server and returns a Promise that resolves with the server's reply.

      The promise will be rejected in case of errors such as a disconnected state, timeout, or the server rejecting the event.

      Parameters

      • event: string

        The event name.

      • Optionalpayload: any

        The payload to send to the server. Defaults to an empty object.

      Returns Promise<any>

      A promise that fulfills or rejects with the server's reply.

    • Pushes a targeted event to the server and invokes a callback with the server's reply.

      It sends the event to the LiveComponent or LiveView the selectorOrTarget is defined in, where its value can be either a query selector, an actual DOM element, or a CID (component id) returned by the @myself assign.

      If the selector matches multiple elements, the event is sent to all of them, even if they belong to the same LiveComponent or LiveView.

      Note: this version silently ignores push errors. Use the promise-returning version to handle errors.

      Parameters

      • selectorOrTarget: PhxTarget

        The selector, element, or CID to target.

      • event: string

        The event name.

      • payload: object

        The payload to send to the server. Defaults to an empty object.

      • onReply: OnReply

        A callback to handle the server's reply.

      Returns void

    • Pushes a targeted event to the server and returns a Promise that resolves with the server's reply.

      It sends the event to the LiveComponent or LiveView the selectorOrTarget is defined in, where its value can be either a query selector, an actual DOM element, or a CID (component id) returned by the @myself assign.

      If the selector matches multiple elements, the event is sent to all of them, even if they belong to the same LiveComponent or LiveView. Because of this, it returns a single promise that matches the return value of Promise.allSettled(). Individual fulfilled values are of the format { reply, ref }, where reply is the server's reply.

      The individual promises will be rejected in case of errors such as a disconnected state, timeout, or the server rejecting the event.

      Parameters

      • selectorOrTarget: PhxTarget

        The selector, element, or CID to target.

      • event: string

        The event name.

      • Optionalpayload: object

        The payload to send to the server. Defaults to an empty object.

      Returns Promise<PromiseSettledResult<{ ref: number; reply: any }>[]>

      A promise that resolves when the event has been handled by all targets.

    • The reconnected callback.

      Called when the element's parent LiveView has reconnected to the server.

      Returns void

    • The updated callback.

      Called when the element has been updated in the DOM by the server.

      Returns void

    • Allows to trigger a live file upload.

      Parameters

      • name: string

        The upload name corresponding to the Phoenix.LiveView.allow_upload/3 call.

      • files: FileList

        The files to upload.

      Returns any

    • Allows to trigger a live file upload to a specific target.

      Parameters

      • selectorOrTarget: PhxTarget

        The target to upload the files to.

      • name: string

        The upload name corresponding to the Phoenix.LiveView.allow_upload/3 call.

      • files: FileList

        The files to upload.

      Returns any

    Settings

    Member Visibility

    On This Page

    Properties
    Accessors
    Methods