DEV Community: Fadi Khadra

React-toastify v11 - finally easy to customize

Fadi Khadra — Mon, 16 Dec 2024 23:38:40 +0000

Never heard of react-toastify before? Go check the demo

What is new in v11

I’m super excited about this release! The main focus was on customization, and my goal was to empower you (and myself) so you can fully personalize the look and feel for the notifications.

In short, react-toastify should be able to blend into any design system.

No need to import the css file anymore

The stylesheet is now injected automatically, so you no longer need to import it. The CSS file is still exported by the library.

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Easy customization!

One of the top requests has been how to customize notifications. To be fair, until this release, it was quite challenging because it required users to override numerous CSS classes.

I’ve simplified the DOM structure of the notification by removing extraneous div elements, nested elements, etc... It’s a significant breaking change, but it’s truly worth the effort. I can confidently say that the library can now seamlessly integrate into any design system.

Below, I’ve implemented a couple of different designs using only Tailwind. I didn’t override a single CSS class from react-toastify 🤯!

Head to stackblitz to check the code.

How does it work in practice? On the left side, we have the old DOM structure vs the new one on the right side.

Toastify__toast-body and its child are now completely gone.
The CloseButton now uses an absolute position.

Thanks to those changes, nothing will interfere with your content.

Toastify__toast has some sensible default values(e.g., border-radius, shadow, etc...) that can be customized using css or by updating the associated css variables:

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

Custom progress bar

Allowing a custom progress bar wasn’t on my to-do list at all while working on this release. But seeing how easy it is to customize notifications now, I couldn’t resist 😆.

The best part is that you don’t have to compromise on features like autoClose, pauseOnHover,pauseOnFocusLoss, or even a controlled progress bar—it just works seamlessly for you.

Here is a small gist.

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onClick={notify}>notify</button>
      <ToastContainer />
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <MyCustomProgressBar isPaused={isPaused} onAnimationEnd={() => closeToast()} />
    </div>
  );
}

Head to stackblitz for a live example.

Accessibility and keyboard navigation

ToastContainer and toast accept an ariaLabel prop(finally...). This is quite helpful for screen readers and also for testing.
For example, in cypress you could do cy.findByRole("alert", {name: "the aria label you specified"}).

toast("hello", {
  ariaLabel: "something"
})

If a notification is visible and the user presses alt+t it will focus on the first notification allowing the user to use Tab to navigate through the different elements within the notification.

The hotKeys can be changed of course.

// focus when user presses ⌘ + F
const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'

<ToastContainer hotKeys={matchShortcut} ariaLabel="Notifications ⌘ + F" />

Notification removal reason with onClose callback

Do you want to know whether the user closed the notification or if it closed automatically? Rest assured, this is now possible!

The signature of the onClose callback is now onClose(reason?: boolean | string) => void.

When the user closes the notification, the reason argument is equal to true. In the example below, I've named my argument
removedByUser to make the intent clear.

toast("hello", {
  onClose(removedByUser){
    if(removedByUser) {
      // do something
      return
    }

    // auto close do something else
  }
})

If you are using a custom component for your notification, you might want more control over the reason, especially if it contains
multiple call to actions.

import { ToastContentProps } from "react-toastify";

function CustomNotification({closeToast}: ToastContentProps) {
  return <div>
      You received a new message
      <button onClick={() => closeToast("reply")}>Reply</button>
      <button onClick={() => closeToast("ignore")}>Ignore</button>
    </div>
}

toast(CustomNotification, {
  onClose(reason){
    switch (reason) {
      case "reply":
        // navigate to reply page for example or open a dialog
      case "ignore":
        // tell the other user that she/he was ghosted xD
      default:
        // 🤷‍♂️
    }
  }
})

💥 Breaking Changes

useToastContainer and useToast no longer exposed

Those hooks are unusable unless you deep dive in react-toastify source code to understand how to glue things together. This is not what I want for my users, it was a bad decision to expose them in the first place, I've learned a good lesson.

onClose and onOpen no longer receive children props

In hindsight, I should never have done this. The feature is practically not used. Below the new signature for each callback:

onOpen: () => void
onClose: (reason?: boolean | string) => void

Styling

react-toastify/dist/ReactToastify.minimal.css has been removed.
Scss is out of the picture now. The library uses good old css.
bodyClassName and bodyStyle are no longer needed.
progressBarStyle in order to reduce the api surface. They are now better way to customize everything without relying on inline style.
injectStyle has been removed. This function is no longer needed.
The css class Toastify__toast-body and its direct child have been removed.

🐞 Bug Fixes

add support for react19 #1177 #1185
reexport CloseButtonProps #1165
fix newestOnTop for real this time #1176
no longer throw this ugly error: Cannot set properties of undefined (setting 'toggle') #1170
onClose callback is no longer delayed until the exit animation completes #1179

🔮What's next?

I'm gradually rewriting part of the documentation. I've created a collection on stackblitz, this way you can find all the examples in one place. I'll keep adding more examples as I go.

A beautiful TUI for caniuse.com

Fadi Khadra — Tue, 10 Jan 2023 21:25:26 +0000

Hey, I just released a TUI for caniuse.com. I tried to keep the most important informations from the web version. It work offline as well after the initial launch and it update itself as well on regular basis.

more details here: https://github.com/fkhadra/caniuse

React-contexify v6 is live!

Fadi Khadra — Mon, 14 Nov 2022 10:49:19 +0000

Never heard of react-contexify before? Go check the demo

React-contexify let you add a context menu (right click) to your react app with ease.
It comes with a lot of features: prevent menu from going off screen, keyboard shortcut, keyboard navigation, custom positioning, subemnu support, super easy to customize, etc...

It can even be used to be simple dropdown 😆.

React-contexify is the first react library I've open sourced, it was also my sandbox when learning react. I'm super excited by this release!

New features in v6

Allow to disable boundaries check
Allow to disable preventDefault on key down
Add support for hidden property to Separator
Add visual feedback when item is clicked
Easy customization thanks to css variables. Check out the theme builder
Keyboard shortcut made easy! A keyMatcher prop has been added to the Item component.

Despite adding new features, the library size decreased from 3.4Kb to 3.1Kb 💪.

Migrating from an older version?

If you are migrating from an older version, you can follow this guide

Happy coding!

React-toastify v8 is live

Fadi Khadra — Thu, 26 Aug 2021 21:16:33 +0000

Never heard of react-toastify before? Go check the demo

React-toastify has been around for 5 years(will turn five the 8 November 🎂). Since the beginning, one of the goals was to provide a library that is highly customizable and also able to work out of the box. Every major release introduces breaking changes but this is for the best 👌.

What is new in v8

Who doesn't like icons

Let's break down what is happening in the gif above. Notifications of different types (toast.info, toast.error, toast.success, toast.warning) display an icon associated with the selected type. You can also notice that the progress bar color matches the type color.

Don't be afraid 😱, if you don't like those icons you can use your own or remove them. This is what it looks like in practice.

toast("Default toast behavior is untouched, no icon to display");
toast.info("Lorem ipsum dolor"); // same as toast(message, {type: "info"});
toast.error("Lorem ipsum dolor")
toast.success("Lorem ipsum dolor")
toast.warn("Lorem ipsum dolor")
toast.error("Without icon", {
  icon: false
});
toast.success("You can provide any string", {
  icon: "🚀"
});
// custom icons have access to the theme and the toast type
toast.success("And of course a component of your choice", {
  icon: MyIcon
});
toast.success("Even a function, given you return something that can be rendered", {
  icon: ({theme, type}) =>  <img src="url"/>
});
//Disable icons
<ToastContainer icon={false} />

Clear separation between type and theme

Prior to v8, toast.info, toast.error, etc... Would display respectively a blue notification, a red notification, etc... This is not the case anymore. There are 3 distinct themes: light, dark, colored. The theme can be applied globally or per notification.

//Set the theme globally 
<ToastContainer theme="dark" />

// define per toast
toast.info("Display a dark notification of type info");
toast.info("Display a light notification of type info", { theme: "light" });
toast.info("Display a blue notification of type info", { theme: "colored" });

This separation will benefit theming in the future.

I promise this is new, I'll tell you if you await

The library exposes a toast.promise function. Supply a promise and the notification will be updated if it resolves or fails. When the promise is pending a spinner is displayed. Again you hide it, I bet you already know how to😆.

Let's start with a simple example

const resolveAfter3Sec = new Promise(resolve => setTimeout(resolve, 3000));
toast.promise(
    resolveAfter3Sec,
    {
      pending: 'Promise is pending',
      success: 'Promise resolved 👌',
      error: 'Promise rejected 🤯'
    }
)

Displaying a simple message is what you would want to do in 90% of cases. But what if the message you want to display depends on the promise response, what if you want to change some options for the error notification? Rest assured, under the hood, the library uses toast.update. Thanks to this, you have full control over each notification.

const resolveWithSomeData = new Promise(resolve => setTimeout(() => resolve("world"), 3000));
toast.promise(
    resolveAfter3Sec,
    {
      pending: 'Promise is pending',
      success: {
        render({data}){
          return `Hello ${data}`
        },
        // other options
        icon: "🟢",
      },
      error: {
        render({data}){
          // When the promise reject, data will contains the error
          return <MyErrorComponent message={data.message} />
        }
      }
    }
)

Because you have the full power of toast.update, you can even supply a custom transition if you want 🤯

If you want to take care of each step yourself you can use toast.loading and update the notification yourself.

const id = toast.loading("Please wait...")
//do something else
toast.update(id, { render: "All is good", type: "success" });

Pass data even when you are not rendering a react component

One way to pass data to the notification was to use the context api or provide your own component. Starting v8 a data option is now available to make it easier.

toast(({data}) => `Hello ${data}`, {
  data: "world"
})

I just want to change few colors

Most of the time, users are ok with the default style, they just want to change some colors to match their brand. I think one way to improve the DX for all of us is to embrace CSS variables. That's why the library has switched to css variables!
All you want is to change the color of the progress bar? No problem

:root{
  // this is the default value below
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
}

You can find the list of all exposed variables here

Thanks for reading. You can access the full release note here

React-toastify v7 is live

Fadi Khadra — Tue, 09 Feb 2021 15:38:31 +0000

The v7 react-toastify has been released. Besides the bug fixes, this version brings really nice improvement.

CSS animation just works! Changing the animation should be as easy as a copy/paste.
Provide a way to load the CSS without a CSS loader.
Specify swipe direction.
Last but not least, the bundle size has been reduced from ~7k to ~5k 🎉

Repository: https://github.com/fkhadra/react-toastify
Documentation: https://fkhadra.github.io/react-toastify/introduction/

Enjoy !

The road to React-contexify v5

Fadi Khadra — Thu, 03 Dec 2020 18:53:02 +0000

TLDR: For those who never heard about react-contexify, the library lets you add a context menu to your app with ease. You can see what it looks like below.

You can find the project here

There is always room for improvement

There were 36 open issues on GitHub 😱(vs 2 today). It doesn't seem like a lot but for a single person, believe me, it takes quite some time to review them all. Every time I wanted to work on it, I had to cancel, I always found a "good" reason to give up.

One day, while I was working on a new app, I needed a context menu. Without thinking too much I've added react-contexify to my app and I started to work with it. The more I've worked with it the more I was struggling to accomplish even the simple things, and I'm the one who created this 🤦‍♂️.

Despite the lack of simplicity, some people were still using it. Open source is about people, not about software. I had to thanks those people for their trust. One way of doing that was to improve the library they rely on.

Do it, do it right, do it well

After browsing the 36 issues, I was able to classify them into 3 categories:

bug
features
lack of documentation

Thanks to that, I knew exactly what I had to do. I won't go into details on how I fixed the bugs or added new features. What I want to highlight here, is when you understand the problem you have to solve, it become clear in your mind what you should do. It's a real productivity boost.

Eat your own dogfood

The documentation is as important as the code, even more important. I noticed that with one of my other library, react-toastify, when I rewrote the documentation for it, the download skyrocketed(currently 2M/Month based on npm stat).

Based on my previous experience, I decided to rewrite the documentation. During the rewrite, I used my library extensively, thanks to that I spotted bugs and missing features.

Key take away

Invest your time in the documentation. Good documentation === happy developer 😍
Your project doesn't need to be perfect before you release it. You can always improve it over time.

Hope you enjoyed that post. Thanks for reading!