This is a Phoenix Elixir IziToast Notification wrapper by IziToast, A JavaScript Notifications Toast Library
The package can be installed
by adding phx_izitoast to your list of dependencies in mix.exs:
def deps do
[
{:phx_izitoast, "~> 0.1.2"}
]
endAdd the below config to config/config.exs. This includes the default configurations(optional).
config :phx_izitoast, :opts, # bottomRight, bottomLeft, topRight, topLeft, topCenter,
position: "topRight", # dark,
theme: "light",
timeout: 5000,
close: true,
titleSize: 18,
messageSize: 18,
progressBar: trueAdding the JS Files to Layout and Template. First import the Izitoast to your layout_view.ex
import PhxIzitoastAdd 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
Quickest way to use PhxIzitoast
conn
|> PhxIzitoast.message("message")or
conn
|> PhxIzitoast.success("title", "message", opts \\ [])
|> PhxIzitoast.error("", "This is an Error message", [position: "center", timeout: 10000])The title can be left to "" to ignore the toast title
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", " 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
endWIth this you can remove the default notification alerts in app.html.eex and replace all your put_flash/2 with PhxIzitoast .
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 !!!")conn
|> PhxIzitoast.clear_toast()The docs can be found at https://hexdocs.pm/phx_izitoast.
Phx Izitoast is released under MIT License
Happy coding, Star before Fork 😊💪💯