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.