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.