SimpleToast

View Source

Dead simple toast notifications for Phoenix LiveView. No CSS imports, no npm, just works.

Installation

  1. Add simple_toast to your dependencies:
def deps do
  [
    {:simple_toast, "~> 0.1.0"}
  ]
end
  1. Import the JavaScript hook in your app.js:
import { SimpleToast } from "simple_toast";

// Add to your hooks
let hooks = {
  // ... your other hooks
  SimpleToast: SimpleToast
};
  1. Add the container to your root layout (e.g., root.html.heex):
<SimpleToast.container />

That's it! No CSS imports needed - styles are injected automatically.

Usage

In LiveView

def handle_event("save", _params, socket) do
  # Your save logic here...
  
  {:noreply, SimpleToast.send(socket, :success, "Changes saved!")}
end

def handle_event("delete", _params, socket) do
  # Your delete logic here...
  
  {:noreply, SimpleToast.send(socket, :error, "Failed to delete", duration: 5000)}
end

In Controllers

def create(conn, params) do
  # Your create logic here...
  
  conn
  |> SimpleToast.put_flash(:success, "Item created successfully!")
  |> redirect(to: ~p"/items")
end

Toast Types

  • :info - Blue toast for informational messages
  • :success - Green toast for success messages
  • :error - Red toast for error messages
  • :warning - Yellow toast for warning messages

Options

  • :duration - How long to show the toast in milliseconds (default: 3000)

Why SimpleToast?

Unlike other toast libraries, SimpleToast:

  • No CSS imports - All styles are bundled inline
  • No JavaScript setup - The hook is automatically injected
  • No npm dependencies - Pure Elixir/Phoenix solution
  • No configuration - Works out of the box
  • Minimal API - Just send/3 and put_flash/3
  • Tiny footprint - Single component, no bloat

License

MIT License. See LICENSE for details.