phx_izitoast

This is a Phoenix Elixir IziToast Notification wrapper. https://izitoast.marcelodolza.com, A JavaScript Notifications Toast Library


Keywords
elixir-lang, elixir-phoenix, izitoast, js, phoenix-framework, toast
License
MIT

Documentation

Phx Izitoast - Phoenix Notification package

img

This is a Phoenix Elixir IziToast Notification wrapper by IziToast, A JavaScript Notifications Toast Library

TODO: Add description

Installation

The package can be installed by adding phx_izitoast to your list of dependencies in mix.exs:

def deps do
  [
    {:phx_izitoast, "~> 0.1.0"}
  ]
end

Configuration

Add the below config to config/config.exs. This includes the default configurations.

config :phx_izitoast, :opts, # bottomRight, bottomLeft, topRight, topLeft, topCenter, 
    position: "topRight", # dark,
    theme: "light",
    timeout: 5000,
    close: true,
    titleSize: 18,
    messageSize: 18,
    progressBar: true

Adding the JS Files to Layout and Template. First import the Izitoast to your layout_view.ex

import PhxIzitoast

Add the below function to the bottom of your app.html.eex just efore the closing </body> tag . This will import the needed css and js files.

<body>
...............
<%= izi_toast(@conn) %>
.................
</body>

Add the below code to your app_web/endpoint.ex file just below the existing plug Plug.Static configuration.

plug Plug.Static, 
    at: "/", 
    from: {:phx_izitoast, "priv/static"}, 
    gzip: false, 
    only: ~w(css  js )

This adds the necessary js and css for iziToast

Usage

Quickest way to use PhxIzitoast

conn
|> PhxIzitoast.message("message")

Usage in code would be like:

def create(conn, %{"category" => category_params}) do
  slug = slugified_title(category_params["name"])
  category_params = Map.put(category_params, "slug", slug)

  case Categories.create_category(category_params) do
    {:ok, _category} ->
      conn
      |> PhxIzitoast.success("Category", "Category created successfully")
      |> redirect(to: Routes.category_path(conn, :index))

    {:error, %Ecto.Changeset{} = changeset} ->
      conn 
      |> PhxIzitoast.error("Category", "A Validation Error !!!")
      |> render("new.html", changeset: changeset)
  end
end

WIth this you can remove the default notification alerts in app.html.eex and replace all your put_flash/2 with PhxIzitoast .

More functions include:

conn 
|> PhxIzitoast.success("title", "awesome", position: "bottomRight")
conn 
|> PhxIzitoast.success("title", "awesome")
conn 
|> PhxIzitoast.info("Success", "awesome", position: "topRight")
conn 
|> PhxIzitoast.info("Hey", "This is Info")
conn 
|> PhxIzitoast.warning("title", "awesome", timeout: 1000)
conn 
|> PhxIzitoast.warning("title", "not very awesome")
conn 
|> PhxIzitoast.error("Arrow", "You've Failed this city", position: "bottomLeft")
conn 
|> PhxIzitoast.info("Error 500", "Error Occured !!!")

Documentation

The docs can be found at https://hexdocs.pm/phx_izitoast.

AUthor

ManuEl Geek

Contributing & Licence

Phx Izitoast is released under MIT License