Skip to content

Latest commit

 

History

History
179 lines (136 loc) · 4.16 KB

README.md

File metadata and controls

179 lines (136 loc) · 4.16 KB
Raw

Phx Izitoast - Phoenix Notification package

travis hex badge

img

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

Table of contents

Set up

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.2"}
  ]
end

Configuration

Add 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: 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")

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
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 !!!")
conn 
|> PhxIzitoast.clear_toast()

Documentation

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

About Me

Magak Emmanuel

Licence

Phx Izitoast is released under MIT License

license

Open Source Love

Happy coding, Star before Fork 😊💪💯