LogoLogo
v1.2.0
v1.2.0
  • 🌸What is Petal Pro?
  • 💡V1.2.0 Overview
  • ⏫Upgrade guide
  • Guides
    • 🚀Creating a web app from start to finish
  • Fundamentals
    • 💿Installation
    • 📂Folder structure
    • 🗃️Included Pages
    • 😀Users & Authentication
    • 🏢Organizations & Multitenancy
    • 🧊Components
    • 🎨Branding
    • 🌱Seeding
    • 📄Layouts & Menus
    • 🛠️Background Tasks and Jobs
    • 🔧Util, DB & Helpers
    • 📧Emails
    • 🪝Javascript Hooks
    • 📚Extra Hex Libraries
    • 🏗️Generators & Page Builder
    • 🗣️Translations
    • 🖐️Contributing
    • 🛫Deployment
Powered by GitBook
On this page
  • Remove flash hook
  • Resize text area hook
  • Scroll top hook

Was this helpful?

  1. Fundamentals

Javascript Hooks

Remove flash hook

This hook pairs with the <.notification> 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 3 years ago

Was this helpful?

🪝