Today, I want to review

GUI toast, a really unique toast notification library for React and Nextjs. What make this interesting is the morphing blob animation.

As you can see, If we click any example, the animation is super smooth and that's why I love, the morphing blob animation. So, let's take a look how we can using that. So first I'm going to generate a new Nextjs application. Now we need to install the package. The package name is GUI toast.

Quick Start

npm install goey-toast

Shadcn/ui

npx shadcn@latest add https://goey-toast.vercel.app/r/goey-toaster.json

So this basically install a Shadcn UI. If it’s not already Installed. All right. So now we have this in component folder and inside that we have UI/GUI toaster. So let's try to import that or running the toaster container on the layout in here under the children.

import { GoeyToaster } from "@/components/ui/goey-toaster";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoeyToaster position="top-center" />
      </body>
    </html>
  )
}

So let's do it the GUI toaster should come from the Shadcn UI not come from the package because we are using shadcn UI. So just like this you can just put the position to whatever you want. like for example top center so now let's take a look how we can use the toaster on for example in the page.tsx.

If you take a look on the guey toast component, basically this is not part of Shadcn UI component. That mean you can install the guey toaster without Shadcn UI. So first let's just take a look the basic toast type like a default success error warning and info but first we have to import the GUI toast from the component toast but this is basically if you take a look on the component guides it's come from the package and just export that right here.

"use client";
import { Button } from "@/components/ui/button";
import { gooeyToast } from "@/components/ui/goey-toaster";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black gap-x-2">
      <Button variant="outline" onClick={() => gooeyToast.success("Success!")}>Success</Button>
      <Button variant="outline" onClick={() => gooeyToast.error("Error!")}>Error</Button>
      <Button variant="outline" onClick={() => gooeyToast.warning("Warning!")}>Warning</Button>
      <Button variant="outline" onClick={() => gooeyToast.info("Info!")}>Info</Button>
    </div>
  );
}

let's trying to do onClick on the default and say to function and in here we can running the guey toast right and then we can just put the value in here like default success like in the above code. So now let's take a look. If you click Success, you can see, that's the success look like normal toast, right? It's pretty simple. You can just use .error to using the error. Same for warning and info. If you go back in here, that's the default success, right? The color is automatically green for success and different for error warning and info. So how if I want to add description on those? It's pretty simple here. You can just add a comma and then object and then put the description and paste the text. That's it. Here let's take a look here. If I click send, as you can see, we have the description, right? It's super simple.

"use client";
import { Button } from "@/components/ui/button";
import { gooeyToast } from "@/components/ui/goey-toaster";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black gap-x-2">
      <Button variant="outline" onClick={() => gooeyToast.success('Saved', {
        description: 'Your changes have been synced.',
        spring: false,
      })}>Success</Button>
    </div >
  );
}

And anyway, it's not just text description. I want to add action button in here so you can do that basically under the description you can add action and then you can put an object inside it and you can say the label you want to show like for example copy text . And also we need to add onClick that is important. So I'm going to put on click event in here. So what I'm going to do in here is just navigator. And if the copy is success, I want to say success label to for example copied. All right. So let's try to save that. Let's take a look. If I click share link now, as you can see, we have this button copy. If I click the button now we have the copy right here that mean it's success copied. If I paste that on the URL here we have this https://stoppio.com. So next how about the promise toast. So in here as you can see the button. When I click tha is basically will running the handle save function. So let's try to create that function on the top in here. So I'm going to say function handleSave. So in here we can run guey toast dot promise because we're going to handle the promise in here. So the first parameter is basically the function to fetch the data. So I'm going to create savePost. So I'm going to create the async await function on the top in here. This basically async function called save post. As you can see I create rest variable. This is a wait for the https json placeholder typico.com/post and this basically make a post request and send the body title body and user ID and also send the headers right content type application JSON if the respond is not okay just return error request failed if okay the return should be respond JSON that's it as you can see go to promise and then in here we can we have to put another props in here. It should be an object. So in here we can add condition basically if the post request is loading. Let's just show this saving with three dot and then if the post request is success right we can also add a text in here like for example post save it and also if the promise failed or error I can put string like something went wrong. As you can see all the condition like loading or success or error is handled by promise. So we don't have to handle that manually. So let's take a look how this is works.

"use client";
import { Button } from "@/components/ui/button";
import { gooeyToast } from "@/components/ui/goey-toaster";

export default function Home() {
  async function savePost(shouldFail = false) {
    if (shouldFail) {
      // simulate network / server error
      await new Promise((r) => setTimeout(r, 1200));
      throw new Error("Request failed");
    }

    const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      body: JSON.stringify({
        title: "Gooey Toast",
        body: "This is a test Post",
        userId: 1,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    });

    if (!res.ok) {
      throw new Error("Request failed");
    }

    return res.json();
  }

  function handleSave(shouldFail = false) {
    gooeyToast.promise(savePost(shouldFail), {
      loading: "Saving...",
      success: "Post Saved",
      error: "Something went wrong",
      description: {
        success: "Your changes are live.",
        error: "Please try again.",
      },
     action: {
       error: {
         label: "Retry",
         onClick: () => handleSave(false),
       },
     },
    });
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black gap-x-2">
      <Button
        variant="outline"
        onClick={() =>
          gooeyToast.info("Share link ready", {
            description: "Your link has been generated",
            action: {
              label: "Copy",
              successLabel: "Copied!",
              onClick: () => {
                navigator.clipboard.writeText("https://stoppio.com");
              },
            },
          })
        }
      >
        Share link
      </Button>

      <Button onClick={() => handleSave()}>Save (Success)</Button>
      <Button onClick={() => handleSave(true)}>Save (Error)</Button>
    </div>
  );
}

So if I click save you can see it's make a request in here and we have post save that mean this is success right and of course you can always add description in here if you want like for example description if success show this description is if error show this description. So let's try if I click that again now we should see the description because this is success right here we go you change if the post request is failed so here I'm going to add the condition if fail is true then failed is basically props by default I'm going to say false right if the should failed is true it's basically will error right here great so this basically will simulate the network server error. Let's create the button. I'm going to scroll down and this is the button. As you can see, handle safe. This is uh true. And I'm going to grab the props in here. I'm going to grab the shield failed by default is false. And we have to send that value on save post. Here we go. So now let's take a look. If I click the success, it should be success. Now If I click error now, it should be error. Something went wrong. Let's try again. Right. For example, if you want to add action button, you can also do that. Here on the after description, you can put action and then inside that you can put object and if this is error, you can put the label label like retry for example. And then you can add on click in here. In this on click, you can run again the handleSave function. And you can put false in here to make sure the should fail. It should be false right now. Right. So let's try. If I click that now, we should have the retry button. If I click that, it's basically will make a new post request. And now it should be post save, right?. And also you can customize the style. For example, if you take a look on the documentation, custom style, on the object, you can put like a fill color, border color, and border width and etc. This is the custom color as you can see. So, yep, you can just styling the toes whatever you want.

Github: https://github.com/anl331/goey-toast

Website: https://goey-toast.vercel.app

This Toast Has BLOB Animations