Easiest Way To Add Toaster inside Phoenix/Elixir App

  1. React JS inside your phoenix/elixir app: react_phoenix
  2. A toaster you want to integrate: Cogo Toast — my toaster
conn
|> put_flash(:success, "Successfully shortened links") <- or :error
<%= unless is_nil(get_flash(@conn, :error)) do %>
<%= ReactPhoenix.ClientSide.react_component("Components.Toast", %{message: get_flash(@conn, :error), flash_type: "error"}) %>
<% end %>
<%= unless is_nil(get_flash(@conn, :success)) do %>
<%= ReactPhoenix.ClientSide.react_component("Components.Toast", %{message: get_flash(@conn, :success), flash_type: "success"}) %>
<% end %>
<%= render YourWeb.SharedView, "toast.html", conn: @conn %> <-- Paste this anywhere inside app.html
import React, { Component } from 'react'
import cogoToast from 'cogo-toast'
export default class Toast extends Component{componentDidMount(){
const { message, flash_type } = this.props
this.returnFlash(message, flash_type)
}
returnFlash(message, type) {
let options = {
hideAfter: 5,
position: 'top-right'
}
switch (type) {
case "success":
return cogoToast.success(message, options)
case "info":
return cogoToast.info(message, options)
case "warn":
return cogoToast.warn(message, options)
case "error":
return cogoToast.error(message, options)
default:
return cogoToast.loading(message, options)
}
}
render() {
return null
}
}
import Toast from './toast'window.Components = {
Toast
}

--

--

--

www.alvinrapada.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What are Primitive and Reference Types in JavaScript?

The Secrets of JSON.stringify()

Installing NVM on MAC OSX

Gif Attack — A Real-Time Competitive Game Room

Deploy a NodeJS Application to Amazon Linux 2 with Free SSL

Virtual DOM and React

Generate random string in JavaScript.

How to array sort by date and time in javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alvin Rapada

Alvin Rapada

www.alvinrapada.com

More from Medium

ORMs and Why I Recommend Prisma

Generating a JWT token in native NodeJS

When I was trying to install a reactjs web application, an error occurred.

Run MongoDB for development