LiveView API - handleParams
Let's explore the handleParams
method. Since the previous example (counterLiveView
) did not use handleParams
,
we'll define helloLiveView.ts
and explore the handleParams
method with it. As you can see below, helloLiveView.ts
defines mount
, handleParams
, and render
.
export const helloLiveView = createLiveView({
mount: (socket) => {
socket.assign({ name: "World" });
},
handleParams(url, socket) {
const name = url.searchParams.get("name") || "World";
socket.assign({ name });
},
render: (context) => html`Hello ${context.name}!`,
});
In the case of helloLiveView
, we are using handleParams
to update the name
in the context
based on the name
query parameter in the URL
. If there is no name
query parameter, we default to World
.
Example Renders
Let's say you have the helloLiveView
routed to /hello
. Visiting the following paths would result in the following
renders:
/hello
-Hello World!
/hello?name=LiveViewJS
-Hello LiveViewJS!
/hello?name=LiveViewJS&foo=bar
-Hello LiveViewJS!
/hello?name=LiveViewJS#blah
-Hello LiveViewJS!
handleParams
Method
handleParams
is automatically called by LiveViewJS on the initial load of a LiveView, as well as anytime the URL of
the LiveView changes. handleParams
allows developers to access the full URL
of the LiveView including the host
,
path
, hash
, pathname
, etc, and then update the context
of the socket
or otherwise respond to data in the URL
.
Worth noting that the http server (e.g., express or oak) handles the routing of the browser to this LiveView. This
means that changes in the URL
for handleParams
are typically search parameters or hash changes. Changing the host
and/or path of a URL will typically mean the server routes you to a different LiveView (if one exists at that host and
path).
handleParams
Signature
handleParams(url: URL, socket: LiveViewSocket<TContext, TInfos>): void | Promise<void>;
The URL
passed to the handleParams
method is the standard URL
object, not a LiveViewJS specific URL
object. See the MDN URL documentation for more information.