phoenix_live_view
    Preparing search index...

    Interface HookInterface<E>

    Defines the lifecycle callbacks and custom methods for a LiveView hook.

    interface HookInterface<E extends HTMLElement = HTMLElement> {
        beforeUpdate?: () => void;
        destroyed?: () => void;
        disconnected?: () => void;
        el: E;
        liveSocket: LiveSocket;
        mounted?: () => void;
        reconnected?: () => void;
        updated?: () => void;
        handleEvent(event: string, callback: (payload: any) => any): CallbackRef;
        js(): HookJSCommands;
        pushEvent(event: string, payload: any, onReply: OnReply): void;
        pushEvent(event: string, payload?: any): Promise<any>;
        pushEventTo(
            selectorOrTarget: PhxTarget,
            event: string,
            payload: object,
            onReply: OnReply,
        ): void;
        pushEventTo(
            selectorOrTarget: PhxTarget,
            event: string,
            payload?: object,
        ): Promise<PromiseSettledResult<{ ref: number; reply: any }>[]>;
        removeHandleEvent(ref: CallbackRef): void;
        upload(name: any, files: any): any;
        uploadTo(selectorOrTarget: PhxTarget, name: any, files: any): any;
        [key: string | number | symbol]: any;
    }

    Type Parameters

    • E extends HTMLElement = HTMLElement

    Implemented by

    Indexable

    • [key: string | number | symbol]: any
    Index

    Properties

    beforeUpdate? destroyed? disconnected? el liveSocket mounted? reconnected? updated?

    Methods

    handleEvent js pushEvent pushEventTo removeHandleEvent upload uploadTo

    Properties

    beforeUpdate?: () => void

    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.

    destroyed?: () => 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.

    disconnected?: () => void

    The disconnected callback.

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

    el: E

    The DOM element that the hook is attached to.

    liveSocket: LiveSocket

    The LiveSocket instance that the hook is attached to.

    mounted?: () => void

    The mounted callback.

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

    reconnected?: () => void

    The reconnected callback.

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

    updated?: () => void

    The updated callback.

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

    Methods

    • 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.

    • 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.

    • Removes a callback registered with handleEvent.

      Parameters

      • ref: CallbackRef

        The reference to the callback to remove.

      Returns void

    • Allows to trigger a live file upload.

      Parameters

      • name: any

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

      • files: any

        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: any

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

      • files: any

        The files to upload.

      Returns any

    Settings

    Member Visibility

    On This Page

    Properties
    Methods