# LiveView Hooks
`elixir_uikit` exports three LiveView hooks: **Sortable**, **Modal**, and **Switcher**. These are automatically registered when you run `mix uikit.setup`.
## Sortable Hook
Enables drag-and-drop reordering with server-side sync.
### Setup
```heex
<.uk_sortable id="my-list" phx-hook="Sortable" data-event="reorder_items">
{item.name}
```
### Event
When items are reordered, the hook pushes an event to the server with the new order of element IDs.
- **Default event name:** `"uikit:reorder"`
- **Custom event name:** Set `data-event` on the container
- **Payload:** `%{"items" => ["item-3", "item-1", "item-2"]}`
### Server handler
```elixir
def handle_event("reorder_items", %{"items" => ids}, socket) do
# ids is a list of DOM element IDs in the new order
# Extract your record IDs and update positions
{:noreply, socket}
end
```
### Requirements
- The container **must** have an `id` and `phx-hook="Sortable"`.
- **Every child element must have a unique `id`** — otherwise LiveView cannot track reordered items.
---
## Modal Hook
Enables server-controlled modal show/hide via assigns.
### Setup
The hook is automatically attached when you use `show` on `uk_modal`:
```heex
<.uk_modal id="my-modal" show={@show_modal} on_close="modal_closed">
<:header><.uk_modal_title>Title
<:body>Content
```
### How it works
- Set `show={true}` to open the modal, `show={false}` to close it.
- When the user dismisses the modal (Esc key or background click), the hook pushes the `on_close` event (default: `"uikit:modal_closed"`) so you can sync state.
- **Payload:** `%{"id" => "my-modal"}`
### Server handler
```elixir
def handle_event("modal_closed", %{"id" => _id}, socket) do
{:noreply, assign(socket, show_modal: false)}
end
```
### Client-side only alternative
If you don't need server control, skip `show` and use `uk_toggle` on a button:
```heex
<.uk_button uk_toggle="target: #my-modal">Open
<.uk_modal id="my-modal">
<:body>Content
```
---
## Switcher Hook
Enables server-controlled tab switching via assigns.
### Setup
The hook is automatically attached when you use `active` on `uk_subnav`:
```heex
<.uk_subnav id="my-tabs" pill switcher="connect: #my-content" active={@active_tab} on_change="tab_changed">
<:item href="#">Tab 1
<:item href="#">Tab 2
<:item href="#">Tab 3
<.uk_switcher id="my-content">
Content 1
Content 2
Content 3
```
### How it works
- Set `active={0}`, `active={1}`, etc. to programmatically switch tabs.
- When the user clicks a tab, the hook pushes the `on_change` event (default: `"uikit:switcher_changed"`) with the new index.
- **Payload:** `%{"id" => "my-tabs", "index" => 1}`
### Server handler
```elixir
def handle_event("tab_changed", %{"index" => index}, socket) do
{:noreply, assign(socket, active_tab: index)}
end
```
### Client-side only alternative
If you don't need server-side tab state, omit `active` and `on_change`:
```heex
<.uk_subnav id="tabs" pill switcher="connect: #content">
<:item href="#">Tab 1
<:item href="#">Tab 2
<.uk_switcher id="content">
Content 1
Content 2
```