Question with phx-hook (hook not mounted)


I want to find out, what resolution is the user use on client side. Therefore I add following code to the app.js:

let Hooks = {}
Hooks.ScreenInfo = {
  mounted() {
    console.log("Hello I was called from the hook");
    //this.pushEvent({ screenX: window.innerWidth, screenY: window.innerHeight });


let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})

In the index.html.heex I add an element:

<div id="info" phx-hook="ScreenInfo" />

My problem is, the mounted() - Function is never called. But why? Where is my mistake?


You are calling the hook from a liveview ?

Hello MRdotB,

thank you very much for your answer. I see, no, I thought it also works if I add a hook into the index.html.heex. This is not a LiveView. Your answer show me, that it only work in LiveViews. This is very sad. I need to get a chance to get the screen resolution of the connected client.