Live Toast

https://hexdocs.pm/live_toast/v0.8.0/
Admin
Live Toast is a configurable, stackable toast message system designed as a drop-in replacement for...
Tokens:2,649
Snippets:29
Trust Score:9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Import and Setup LiveToast Hook (npm)

Source: https://hexdocs.pm/live_toast

Import and set up the `createLiveToastHook` from `live_toast` in your `app.js` when using npm.

```javascript
import { createLiveToastHook } from 'live_toast'

let liveSocket = new LiveSocket('/live', Socket, {
  hooks: {
    LiveToast: createLiveToastHook()
  }
})
```

--------------------------------

### Install LiveToast via npm

Source: https://hexdocs.pm/live_toast

If using npm, add `live_toast` to your `package.json` dependencies.

```json
"dependencies": {
  "live_toast": "file:../deps/live_toast",
}
```

--------------------------------

### Import and Setup LiveToast Hook (direct import)

Source: https://hexdocs.pm/live_toast

Import and set up the `createLiveToastHook` directly from the `live_toast` dependency in your `app.js`.

```javascript
// this path would be relative to where your app.js happens to be.
import { createLiveToastHook } from '../deps/live_toast'

let liveSocket = new LiveSocket('/live', Socket, {
    hooks: {
        LiveToast: createLiveToastHook()
    }
})
```

--------------------------------

### Custom Toast Class Function

Source: https://hexdocs.pm/live_toast

Define a custom `toast_class_fn` to dynamically set classes for toasts based on severity or other conditions. This example styles `:info` and `:error` toasts.

```elixir
defmodule MyModule do
  def toast_class_fn(assigns) do
    [
      # base classes
      "group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
      # start hidden if javascript is enabled
      "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
      # used to hide the disconnected flashes
      if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
      # override styles per severity
      assigns[:kind] == :info && "bg-white text-black",
      assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200"
    ]
  end
end
```

--------------------------------

### Override Toast Class Function

Source: https://hexdocs.pm/live_toast

Customize the appearance of toasts by overriding the `toast_class_fn/1` function. This example shows how to add styles for a new `:warning` severity level.

```elixir
def custom_toast_class_fn(assigns) do
  [
    # base classes
    "bg-white group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
    # start hidden if javascript is enabled
    "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
    # used to hide the disconnected flashes
    if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
    # override styles per severity
    assigns[:kind] == :info && "text-black",
    assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200",
    assigns[:kind] == :warning && "!text-amber-700 !bg-amber-100 border-amber-200"
  ]
end
```

--------------------------------

### Internationalization Configuration

Source: https://hexdocs.pm/live_toast

Configure `LiveToast` for internationalization by specifying a `gettext_backend` in `config.exs`. Requires `live_toast.po` files in `priv/gettext/<language>/LC_MESSAGES/`.

```elixir
config :live_toast,
  gettext_backend: MyApp.Gettextcopy
```

```po
msgid ""
msgstr ""
"Language: es\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"

msgid "We can\'t find the internet"
msgstr "Nosotros no podemos encontrar internet"

msgid "Attempting to reconnect"
msgstr "Intentando reconectar"

msgid "Something went wrong!"
msgstr "¡Algo salió mal!"

msgid "Hang in there while we get back on track"
msgstr "Aguanta mientras volvemos a la normalidad"
```

--------------------------------

### Add LiveToast Dependency

Source: https://hexdocs.pm/live_toast

Add `live_toast` to your project's dependencies in `mix.exs`.

```elixir
def deps do
  [
    {:live_toast, "~> 0.8.0"}
  ]
end
```

--------------------------------

### Configure Tailwind CSS for LiveToast

Source: https://hexdocs.pm/live_toast

Add the LiveToast paths to your `tailwind.config.js` to ensure Tailwind can find the necessary class names.

```javascript
// assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/your_app_web.ex',
    '../lib/your_app_web/**/*.*ex',
    '../deps/live_toast/lib/**/*.*ex',
  ]
}
```

--------------------------------

### Configure LiveToast JavaScript Hook

Source: https://hexdocs.pm/live_toast

Initialize the LiveToast JavaScript hook with custom duration and maximum items. This hook is then passed to the LiveSocket configuration.

```javascript
import { createLiveToastHook } from 'live_toast'

// the duration for each toast to stay on screen in ms
const duration = 4000

// how many toasts to show on screen at once
const maxItems = 3

const liveToastHook = createLiveToastHook(duration, maxItems)

let liveSocket = new LiveSocket('/live', Socket, {
  hooks: { LiveToast: liveToastHook }
})
```

--------------------------------

### Put Toast in Plug Conn

Source: https://hexdocs.pm/live_toast

The `LiveToast.put_toast` function can also be used with a `Plug.Conn` in controller actions to display toast messages on non-live pages.

```elixir
defmodule YourApp.SomeController do
  def create(conn, _params) do
    conn
    |> LiveToast.put_toast(:info, "Upload successful.")
    |> render(:whatever)
  end
end
```

--------------------------------

### Replace Flash Group with LiveToast

Source: https://hexdocs.pm/live_toast

Replace the existing `<.flash_group />` component with `<LiveToast.toast_group />` in your `app.html.heex`.

```html
<!-- Remove this! -->
<.flash_group flash={@flash} />

<!-- And replace it with this: -->
<LiveToast.toast_group
  flash={@flash}
  connected={assigns[:socket] != nil}
  toasts_sync={assigns[:toasts_sync]}
/>

<%= @inner_content %>
```

--------------------------------

### Apply Custom Toast Classes

Source: https://hexdocs.pm/live_toast

Apply a custom `toast_class_fn` to `LiveToast.toast_group` to override default toast styling. The `group_class_fn` parameter can be used similarly for the container.

```heex
<LiveToast.toast_group
  flash={@flash}
  connected={assigns[:socket] != nil}
  toast_class_fn={&MyModule.toast_class_fn/1}
  toasts_sync={assigns[:toasts_sync]}
/>
```

--------------------------------

### Put Toast in LiveView Socket

Source: https://hexdocs.pm/live_toast

Utilize the `LiveToast.put_toast` helper function to add a toast message to the LiveView socket, similar to `put_flash`.

```elixir
defmodule YourApp.SomeLiveView do
  def handle_event("submit", _payload, socket) do
    socket = socket
    |> LiveToast.put_toast(:info, "Upload successful.")

    {:noreply, socket}
  end
end
```

--------------------------------

### Send Toast from LiveView Event

Source: https://hexdocs.pm/live_toast

Use `LiveToast.send_toast` within a LiveView event handler to display an informational toast message with custom options.

```elixir
defmodule YourApp.SomeLiveView do
  def handle_event("submit", _payload, socket) do
    options = [
      title: "Status"
    ]

    # you do some thing with the payload, then you want to show a toast, so:
    LiveToast.send_toast(:info, "Upload successful.", options)

    {:noreply, socket}
  end
end
```

--------------------------------

### Configure Custom Severity Levels

Source: https://hexdocs.pm/live_toast

Pass a list of desired severity levels to the `kinds` attribute of the `LiveToast.toast_group` component to enable them. Defaults to `[:info, :error]` if not set.

```html
<LiveToast.toast_group
  flash={@flash}
  connected={assigns[:socket] != nil}
  kinds={[:info, :error, :warning]}
  toast_class_fn={&custom_toast_class_fn/1}
  toasts_sync={assigns[:toasts_sync]}
/>
```

--------------------------------

### Set Toast Corner

Source: https://hexdocs.pm/live_toast

Configure the anchor corner for toast notifications using the `corner` setting in `toast_group`. Defaults to `:bottom_right`.

```heex
<LiveToast.toast_group
  flash={@flash}
  connected={assigns[:socket] != nil}
  corner={:top_right}
  toasts_sync={assigns[:toasts_sync]}
/>
```
Tokens:
Raw