Hi. Thanks for building this great lib. It's an integral part of one of our libs so we'd love to have a UMD for it since it'll be used in multiple projects that come together at runtime. We're using webpack externals for the libs that are commonly used and I guess other people would do so for sure.

Will a UMD file be released with the library? Again thanks for the work.

Provide a possibility of passing HTML element to icon option as a shorthand of their config to increase a possibility of customization beside the traditional way

const IconOptions = {
 tagName: 'svg',
 className: '.notyf__icon',
 text: ' . . . ',
 color: 'red'
}

const IconElement = document.createElement('svg')
IconElement.classList.add('notyf__icon')
IconElement.innerHTML = ' . . . '
IconElement.style.color = 'red'

const notyf = new Notyf({
 icon: IconElement // or IconOptions
});

Hi! Thanks for this nice toast plugin!

Just wanted to let you know that i is possible to inject malicious code due to the usage of innerHTML. It's easy to test on the demo site as well by entering a message like:
They see me rolling <img src=x onerror='alert("hi");' />
or
They see me rolling <img src=x onerror='alert(document.cookie)' />

Please consider escaping message in some way or replace innerHTML with textContent.

Thanks!

I am using Notyf with Webpack. Here's how I installed Notyf:

npm install notyf --save

Then I used this code in my VueJS component to initialize (require) Notyf:

var Notyf = require('notyf')
var notyf = new Notyf()
notyf.alert('You must fill out the form before moving forward')

I got the following error:

Uncaught ReferenceError: Notyf is not defined

I have also tried:

import Notyf from 'notyf'

Which didn't work either.

Can anyone help me getting this to work with VueJS and Webpack? I have used other libraries this way too, and they work just fine. This one isn't working. Any help would be appreciated.

Hey @caroso1222! Thanks for the project ❤️

I have been thinking about the API and a way to extend the API so it's easier to add more notification types than just success and error.

Seeing that the code that makes the two "types" is nearly identical, it should be pretty "easy" to turn it into a loop:

Instead of using

var notyf = new Notyf({
  delay: 1000,
  alertIcon: 'fa fa-exclamation-circle',
  confirmIcon: 'fa fa-check-circle'  
})

I propose moving to:

const notyf = new Notyf({
  types: {
    success: {
      delay: 1000, // #7
      duration: 2000, // #6
      icon: 'fa-foo-fi-fu'
    },
    error: {} // use all defaults
  }
});

const errorNotification = notyf.error({
  title: 'Something went wrong..',
  message: 'We had some trouble while processing your request'
});

errorNotification.close(); // #20
errorNotification.on('close', () => console.log('Notification closed'));

notyf.success({
  html: "<p>Hooray! <code>image-124.jpg</code> has been uploaded!</p>" // #17
});

By nesting the types in the types key, we keep the "root" level open for global options, for example
position: bottom left|bottom right or classPrefix: noty__.

By using an object instead of a string for the individual

This API change should take care of #6, #7, (half) #13, #17, and #20. Oh, and #21 of course 😉

Hi! Thanks for awesome plugin! :) I'm glad to use it with Vue.js.
I have a next question: what if I want use Material Icons instead of FontAwesome? How can I do this? :)

Hello, your bookstore is great! I love it!
I have a problem using it with react in version 16.2.0
At the creation of new toasts, this one will recreate each time new div parent. What is hugely cluttering the DOM and is not really clean ... Do you have a solution? Thank you in advance!

This URL (mentioned in log message about upgrading) is 404'ing
https://docs.psb.codes/redux-promise-middleware/upgrade-guides/v6

Probably because there is no .notyf__container!

Please, add a CDN link version, so we can use this package with only vanilla js.

As you can see from the photo below, large content doesn't play well with notyf because the notification container's width is limited to 400px.

Which is fixable using the className option, but now the ripple effect is broken because it's also set to 400px

Can we add an option to specify the max-width of the container which would also be applied to the ripple element?
Something like this:

notyf.error({
                duration: duration,
                position: position,
                dismissible: dismissible,
                message: ErrorMessage,
                max_width: '50em'
            });

The code below (scss) fixes the problem by overriding default styles:

//A custom class applied via className option.
.toast-custom-notyf {
    max-width: 50em !important;

    .notyf__ripple {
        height: 50em;
        width: 50em;
    }
}

And renders the following result:

And great job on this library, i love it!

Hi, thanks for such a great library.

For now, there are only two types of notification: alert and confirm with notyf--alert and notyf--confirm css classes respectively.
It would be better, if there was a way to add another type of notification or css class. For example, type warning (with another class).

Example API:

const notyf = new Notyf();

notyf.custom('We had some trouble', { className : 'warning' });

Or based on issue #22:

const notyf = new Notyf({
  types: {
    warning: {
      delay: 1000, // #7
      duration: 2000, // #6
      icon: 'fa-foo-fi-fu',
      notificationClass: 'notyf--warning',
    },
  },
});

const errorNotification = notyf.custom({
  type: 'warning'
  title: 'Some uncritical issue',
  message: 'We had some trouble',
});

Hey,

Cool nifty plugin. Some JavaScript frameworks still rely on Bower package manager to manage and import plugins in the project. I would love to see support for Bower.

Hi please add the .info and .warning as standard. This way it will be compatible for me to move over from toastr js (https://codeseven.github.io/toastr/)

will also be nice to implement their feature set with your nice styling and features.

Great plugin by the way!

Thanks!

Hello,

I hope it is ok for you, that I forked your repository and made some extensions:

• enable warn notifications
• separate delay values

I'm not sure, if you can merge these extensions back into your repository.

If you like, you find it at: https://github.com/wolfheart/notyf-extended

Thank you for your original notyf.
Michael

Hi, maybe someone will like it https://jsfiddle.net/9tehLvpx/

This is a great library and I use it on my site, however, it would be nice to change the configuration dynamically. For example, after a Notyf object is created with dismiss disabled, I want to enable dismiss feature on the fly base on some conditions, or change duration. This is currently not possible. It would be nice to be able to configure these configurations.

Thanks for your works

The following config won't properly work:

const notyf = new Notyf({
  types: [
    {
      type: 'custom',
      backgroundColor: 'linear-gradient(45deg, #e541f9, #0aa0ce)'
    }
  ]
});

This is because we're setting the CSS property backgroundColor instead of setting background. Linear gradients are considered to be images and, as such, should be rendered with background-image or the shorthand background.

I think the right way to do this is to introduce a new prop background and deprecate backgroundColor.

This won't be considered as a breaking change as background-color is contained within background

background: [  <background-color>    ||  <background-image>       ||
               <background-repeat>   ||  <background-attachment>  ||
               <background-position>
            ]   |   inherit ;

This will pause the timeout when user hovers the notification.

Took the new version for a spin and here is what happened - at some point ripple effect styling gets weird. Please see very short screen recording below that has all the required info.

PS: with ripple: false styling is fine

Screen recording

When notfy is used with modern Multi page applications e.g. Rails, using Stimulus, Stimulus Reflex or Turbo - it is often required to have elements persist throughout page refreshes or DOM diff replacements.
Currently NotyfView adds the .notyf container dynamically when first instantiated, and only once, however this does not survive page reloads even through a memoized instance of Notyf would.
Therefore it's beneficial that the notyf element is able to survive DOM replacements by turbo or otherwise, this is accomplished with data-reflex-permanent, or data-turbo-permanent respectively. While these attributes can be added dynamically Notyf adds/removes this element seemingly at will

Would you be open to a PR that allows data attributes to be passed to the .notyf and .notyf-announcer container elements?

Hi, great work on this. Is there a way to close programmatically the notyf?

ex. var notyf = new Notyf();
// NoTe: should return some id
var theID = notyf.confirm();

after some time...
notyf.close(theID);

How would I change the position of the toast? Will it be included in the future release? I am using Angular 8.2.11. Thanks :)

Usecase: Run another method once a NotyfNotification is added, dismissed or the timeout expires.

I assumed that with the NotyfNotification class now including on and triggerEvent methods, an event would now be triggered when a notification was removed/added. It appears that triggerEvent is only used to trigger user input events.

Do you have anything against calling NotyfNotification.prototype.triggerEvent in NotyfArray.prototype.push and NotyfArray.prototype.splice?

Would be great if we could have additional default methods for :

Info (Light Blue Background)
notyf.info({......});

Warning (Orange Background)
notyf.warning({......});

The plugin needs an option to setup position (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, middle-left, middle-center, middle-right).
Currently, it's stuck to the bottom right.

Btw, it's a great plugin!
Thanks for all the effort you've put into it.

the z-index in notyf.min.css is 1 I think this should be above any element.

I was using leafletjs and the map is in 999, for obvious reasons the notification did not appear to me and I came to think that it was problems of the api.

I have placed this in 1005 on my fork

.notyf {
    position: fixed;
    bottom: 20px;
    right: 30px;
    width: 20%;
    color: #fff;
    z-index: 1005 /*Here*/
}

Curious to know if there's a way to allow notyf.alert(message_with_html) to be displayed properly?

@caroso1222 Your module allowed us to finally toss jQuery from our entire app.. so thanks!!

First of all, I love this notification library, great job!

An improvement to this library would be to allow the use of SVG icons, this change would lessen dependencies on font icon kits and expand the number of icons that can be used with this library.

Hello,
I would like to change the font of the notification to a sans serif one but this is not mentioned in the documentation.
Using the code example I get a serif font:

Thanks!

Hi,

First of all, thank you for this dead simple lib.

I just have one request, is it possible to add buttons et callback options to confirm and alert methods?

Thank you

Julien

hello! The delay option should be renamed to duration in my opinion, and a new simple "delay" should be added to prevent overlapping, for example; if you add 3 notifications at the same time (alert for example) they all appear and dissapear at the same time, when in fact, setting up a diferent duration or delay to dissapear to each one, should fix it.

It can be done creating multiple instances in your example; but that is not how it should be because if i have 10 alerts, i must have 10 different instances to avoid overlapping!

Using findIndex w/o polyfilling breaks notyf in all available Internet Explorers.

Usage:

Error in Internet Explorer:

Because this is such a beautifully well-written toaster lib, I'd be remiss not to ask if you have any recommendations for similar modal/popup libs. Maybe not the place in which place close it but this lib is fantastic so well done.

...
off-topic personal opinion follows: The ripple effect is cool and all, but I would consider turning it off by default. The non-ripple animation seems more mature to me.

When an alert is created, a classname notyf alert is assigned to the element. The class alert is a special class in Bootstrap so it's setting an additional padding making the card look pretty big.

Fix this by either changing the class name or manually setting padding:0 to the alert element.

Hi,

I just noticed that this library doesn't work if it's used in a script included in the head section of the page (before the body is in place). It also requires script tag to not have defer attribute.

It boils down to this line

It will give the following error: Cannot read property 'appendChild' of null which basically means that the body is not there yet and can't append to it. It works if I move script tag to bottom or use defer attribute, but in my case I can't use neither.

Is there a way to fix this?

Since Notyf adds Divs at body level toasts are present even if the URL of the application was changed by the user.

It is required to have a method to remove all active toasts on the screen.

It would be great if the interface properties would be optional so I can type them without implementing all members.

Currently this leads to a typescript compiler error:

 private types: INotyfNotificationOptions[] = [
    {
      type: 'my-custom-type',
      className: 'my-custom-classname',
    }
  ];

I can make a PR if appreciated.

I know there are quite several folks out there using this package and I've been such an irresponsible maintainer to abandon my dear Notyf. This was my first open source package and I've been through a lot these last 2 years.

I'm happy to take the lead on the project again, resolve the issues, close/merge the PRs and set a roadmap for Notyf 3.0 with better animations, more features, better API and more.

Sorry again to all of you who have opened issues or PRs that I have simply ignore or overlooked :(.

Can you tell me how to add dismiss button and click action?

The SSL certificate of the demo site expired a few days ago.

Was in a process of making PR with some tiny changes. Probably should update dep versions just to be safe.

npm audit image

Hello :-)

Describtion

When setting duration option to 0, notification should be visible until the user close/click it (with dismissible or not) following the documentation.

Expected behavior

Setting duration option to 0, notification must be visible until the user close/click it.

Actual behavior

Setting duration option to 0, notification is visible only for a fraction of ms.

How to reproduce & Context

Using https://carlosroso.com/notyf/ under Windows 10 Pro 2004 with:

• Chromium Version 83.0.4103.61 (Official Build) (64-bit)
• Google Chrome Version 84.0.4147.105 (Official Build) (64-bit)
• Firefox 79.0 (64 bits)

Thanks,
Herve-M

Please add features to Notyf:

• ability to close the toasts with a close button,
• possibility to specify unlimited duration.

It would be amazing to use this in a Svelte project.

I'm emulating a wide monitor here with dev tools, but it also didn't display correctly on my ultrawide windows setup. Its not reaching the side and then on the .disappear it stretches. Hope that makes sense, cool library!

Hi Carlos.
Toasts style are broken in case of long message.

Repro steps:

const message = `
Unless required by applicable law or agreed to in writing, software distributed under the License
Unless required by applicable law or agreed to in writing, software distributed under the License
Unless required by applicable law or agreed to in writing, software distributed under the License
Unless required by applicable law or agreed to in writing, software distributed under the License
Unless required by applicable law or agreed to in writing, software distributed under the License
Unless required by applicable law or agreed to in writing, software distributed under the License
Unless required by applicable law or agreed to in writing, software distributed under the License

new Notyf().error({
  message: message,
  duration: 20000,
});
`

macOS
Safari Version 12.1 (14607.1.40.1.3)
Google Chrome Version 77.0.3865.90 (Official Build) (64-bit)