v1.7.0
Search
K
🪝

Javascript Hooks

Hook structure

We have set up a structure for you that makes it easy to keep adding hooks. To add a new hook:
  1. 1.
    touch /assets/js/hooks/my-hook.js
  2. 2.
    Make sure you export it:
const MyHook = {
...
};
export default MyHook;
  1. 3.
    In hooks/index.js, import it:
import MyHook from "./my-hook";
export default {
MyHook,
};
It will now be available to use in your HEEX templates:
<div phx-hook="MyHook"></div>
Note that in dead views, only the mounted() callback will be run.

Hooks from Petal Framework

Remove flash hook

This hook pairs with the <.flash_group> component and will auto-dismiss a flash message after a period of time (10 seconds).

Resize text area hook

Textareas can be annoying to write in when your content exceeds the height and a scrollbar appears. This hook will auto-resize the textarea as you type in it - so it will never have a scroll bar in it and will keep getting bigger as you add more content.

Scroll top hook

Imagine you have a live view with multiple "pages" within it that you navigate via live_patch links. There is a bug where, if you're on say Page 1 and the content is larger than the view port and you've scrolled down somewhat - if you click a live_patch link to another "page", the content doesn't scroll up. So the content has changed underneath you but you're half way down the page so it's a confusing user experience. You can place phx-hook="ScrollTopHook" on the live_patch link and it will scroll the page to the top for you when you click it.