LogoLogo
v2.0.0
v2.0.0
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
    • 🌎Deploy to Fly.io
    • πŸ’³Adding a subscription
    • πŸ”’Creating Your Own API
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ—ΊοΈGoogle Maps
    • Password Hashing for Windows
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • πŸ’³Stripe billing
    • πŸ””User Notifications
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ–ΌοΈImage uploads
    • πŸ‘₯Impersonation
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
    • πŸ”’REST API
Powered by GitBook
On this page
  • Hook structure
  • Hooks from Petal Pro

Was this helpful?

  1. Fundamentals

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. touch /assets/js/hooks/my-hook.js

  2. Make sure you export it:

const MyHook = {
  ...
};

export default MyHook;
  1. 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 Pro

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.

PreviousEmailsNextExtra Hex Libraries

Last updated 9 months ago

Was this helpful?

πŸͺ