phoenix_live_view
    Preparing search index...

    Interface LiveSocketOptions

    Options for configuring the LiveSocket instance.

    interface LiveSocketOptions {
        bindingPrefix?: string;
        blockPhxChangeWhileComposing?: boolean;
        defaults?: { debounce?: number; throttle?: number };
        disconnectedTimeout?: number;
        dom?: {
            jsQuerySelectorAll?: (
                sourceEl: HTMLElement,
                query: string,
                defaultQuery: () => Element[],
            ) => Element[];
            onBeforeElUpdated?: (fromEl: Element, toEl: Element) => void;
            onDocumentPatch?: (start: () => void) => void;
            onNodeAdded?: (node: Node) => void;
            onPatchEnd?: (container: HTMLElement) => void;
            onPatchStart?: (container: HTMLElement) => void;
        };
        failsafeJitter?: number;
        hooks?: HooksOptions;
        loaderTimeout?: number;
        localStorage?: Storage;
        maxReloads?: number;
        metadata?: {};
        params?: | ((el: HTMLElement) => { [key: string]: any })
        | { [key: string]: any };
        reloadJitterMax?: number;
        reloadJitterMin?: number;
        sessionStorage?: Storage;
        uploaders?: { [key: string]: any };
        viewLogger?: (view: View, kind: string, msg: string, obj: any) => void;
        [key: string]: any;
    }

    Indexable

    • [key: string]: any

      Allow passthrough of other options to the Phoenix Socket constructor.

    Index

    Properties

    bindingPrefix? blockPhxChangeWhileComposing? defaults? disconnectedTimeout? dom? failsafeJitter? hooks? loaderTimeout? localStorage? maxReloads? metadata? params? reloadJitterMax? reloadJitterMin? sessionStorage? uploaders? viewLogger?

    Properties

    bindingPrefix?: string

    The optional prefix to use for all phx DOM annotations.

    Defaults to "phx-".

    blockPhxChangeWhileComposing?: boolean

    If set to true, phx-change events will be blocked (will not fire) while the user is composing input using an IME (Input Method Editor). This is determined by the e.isComposing property on keyboard events, which is true when the user is in the process of entering composed characters (for example, when typing Japanese or Chinese using romaji or pinyin input methods). By default, phx-change will not be blocked during a composition session, but note that there were issues reported in older versions of Safari, where a LiveView patch to the input caused unexpected behavior.

    For more information, see

    Defaults to false.

    defaults?: { debounce?: number; throttle?: number }

    Defaults for phx-debounce and phx-throttle.

    Type Declaration

    • Optionaldebounce?: number

      The millisecond phx-debounce time. Defaults to 300.

    • Optionalthrottle?: number

      The millisecond phx-throttle time. Defaults to 300.

    disconnectedTimeout?: number

    Delay in milliseconds before executing phx-disconnected commands.

    dom?: {
        jsQuerySelectorAll?: (
            sourceEl: HTMLElement,
            query: string,
            defaultQuery: () => Element[],
        ) => Element[];
        onBeforeElUpdated?: (fromEl: Element, toEl: Element) => void;
        onDocumentPatch?: (start: () => void) => void;
        onNodeAdded?: (node: Node) => void;
        onPatchEnd?: (container: HTMLElement) => void;
        onPatchStart?: (container: HTMLElement) => void;
    }

    DOM callbacks.

    Type Declaration

    • OptionaljsQuerySelectorAll?: (
          sourceEl: HTMLElement,
          query: string,
          defaultQuery: () => Element[],
      ) => Element[]

      An optional function to modify the behavior of querying elements in JS commands.

    • OptionalonBeforeElUpdated?: (fromEl: Element, toEl: Element) => void

      Called before an element is updated.

    • OptionalonDocumentPatch?: (start: () => void) => void

      When defined, called with a start callback that needs to be called to perform the actual patch. Failing to call the start callback causes the page to become stuck.

      This can be used to delay patches in order to perform view transitions, for example:

      let liveSocket = new LiveSocket("/live", Socket, {
        dom: {
          onDocumentPatch(start) {
            document.startViewTransition(start);
          }
        }
      })

      It is strongly advised to call start as quickly as possible.

    • OptionalonNodeAdded?: (node: Node) => void

      Called when a new DOM node is added.

    • OptionalonPatchEnd?: (container: HTMLElement) => void

      Called immediately after a DOM patch is applied.

    • OptionalonPatchStart?: (container: HTMLElement) => void

      Called immediately before a DOM patch is applied.

    failsafeJitter?: number

    Time between reload attempts in failsafe mode.

    hooks?: HooksOptions

    Callbacks for LiveView hooks.

    See Client hooks via phx-hook for more information.

    loaderTimeout?: number

    Delay in milliseconds before applying loading states.

    localStorage?: Storage

    An optional Storage-compatible object. Useful when LiveView won't have access to localStorage.

    See sessionStorage for an example.

    maxReloads?: number

    Maximum reloads before entering failsafe mode.

    metadata?: {}

    Object mapping event names to functions for populating event metadata.

    metadata: {
  click: (e, el) => {
    return {
      ctrlKey: e.ctrlKey,
      metaKey: e.metaKey,
      detail: e.detail || 1,
    }
  },
  keydown: (e, el) => {
    return {
      key: e.key,
      ctrlKey: e.ctrlKey,
      metaKey: e.metaKey,
      shiftKey: e.shiftKey
    }
  }
}
    params?: ((el: HTMLElement) => { [key: string]: any }) | { [key: string]: any }

    An object or function for passing connect params. The function receives the element associated with a given LiveView. For example:

    (el) => {view: el.getAttribute("data-my-view-name", token: window.myToken}
    reloadJitterMax?: number

    Maximum time between normal reload attempts.

    reloadJitterMin?: number

    Minimum time between normal reload attempts.

    sessionStorage?: Storage

    An optional Storage-compatible object. Useful when LiveView won't have access to sessionStorage. For example, this could happen if a site loads a cross-domain LiveView in an iframe.

    Example usage:

    class InMemoryStorage {
  constructor() { this.storage = {} }
  getItem(keyName) { return this.storage[keyName] || null }
  removeItem(keyName) { delete this.storage[keyName] }
  setItem(keyName, keyValue) { this.storage[keyName] = keyValue }
}
    uploaders?: { [key: string]: any }

    Callbacks for LiveView uploaders.

    viewLogger?: (view: View, kind: string, msg: string, obj: any) => void

    Function to log debug information. For example:

    (view, kind, msg, obj) => console.log(`${view.id} ${kind}: ${msg} - `, obj)

    Settings

    Member Visibility

    On This Page

    Properties