JS Hooks

Some AvenUI components use JavaScript hooks for enhanced interactivity. Most components work with pure LiveView, but dropdowns and modals benefit from client-side behavior.

Installation

After running mix aven_ui.add, import the hooks in your app.js:

javascript

import { AvenUIHooks } from "./hooks/aven_ui"

const liveSocket = new LiveSocket("/live", Socket, {
  hooks: {
    ...AvenUIHooks,
    // your other hooks
  }
})

Available Hooks

AvenUI includes these JavaScript hooks:

Dropdown

Handles click-outside detection and keyboard navigation for dropdown menus.

Modal

Manages focus trapping, ESC key handling, and backdrop clicks.

Toast

Auto-dismiss timers and swipe-to-dismiss on mobile.

Pure LiveView Alternatives

Many components work without JavaScript hooks using Phoenix.LiveView.JS:

elixir

# Accordion - no hooks needed
<.accordion id="faq">
  <:item title="Question 1">Answer 1</:item>
</.accordion>

# Tabs - no hooks needed
<.tabs active="tab1">
  <:tab id="tab1">Tab 1</:tab>
  <:tab id="tab2">Tab 2</:tab>
</.tabs>

# Alert dismiss - no hooks needed
<.alert dismissible phx-click={JS.hide()}>Message</.alert>

Creating Custom Hooks

Add your own hooks alongside AvenUI hooks:

javascript

// assets/js/hooks/my_hooks.js
export const MyHooks = {
  Tooltip: {
    mounted() {
      // Your tooltip logic
    },
    destroyed() {
      // Cleanup
    }
  }
}

// app.js
import { AvenUIHooks } from "./hooks/aven_ui"
import { MyHooks } from "./hooks/my_hooks"

const hooks = {
  ...AvenUIHooks,
  ...MyHooks
}

Troubleshooting

Hooks not working

Make sure you've imported AvenUIHooks and added them to your LiveSocket configuration. Check the browser console for errors.

Component not interactive

Verify the component has the correct phx-hook attribute. Some components like Dropdown require the hook to function properly.