Skip to main content

Example Hook

Let's create a hook that will format a text input into a phone number as a user types.

Hook Definition

// Define the hook
const PhoneNumber: ViewHook = {
mounted() {
this.el.addEventListener("input", e => {
let match = this.el.value.replace(/\D/g, "").match(/^(\d{3})(\d{3})(\d{4})$/)
if(match) {
this.el.value = `${match[1]}-${match[2]}-${match[3]}`
}
})
}
}
// Add the hook to the LiveSocket
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { PhoneNumber }
});

Hook Usage

<input phx-hook="PhoneNumber" type="text" />

Credit 🙌

Credit for this example goes to the Phoenix LiveView docs. I didn't want to reinvent the wheel, so I just copied the example from the Phoenix LiveView docs, added some types, and simplified it a bit.