SimpleToast
View SourceDead simple toast notifications for Phoenix LiveView. No CSS imports, no npm, just works.
Installation
- Add
simple_toast
to your dependencies:
def deps do
[
{:simple_toast, "~> 0.1.0"}
]
end
- Import the JavaScript hook in your
app.js
:
import { SimpleToast } from "simple_toast";
// Add to your hooks
let hooks = {
// ... your other hooks
SimpleToast: SimpleToast
};
- 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
andput_flash/3
- Tiny footprint - Single component, no bloat
License
MIT License. See LICENSE for details.