caroso1222 / notyf Goto Github PK
View Code? Open in Web Editor NEW๐ป A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
Home Page: https://carlosroso.com/notyf/
License: MIT License
๐ป A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
Home Page: https://carlosroso.com/notyf/
License: MIT License
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 :(.
Please add features to Notyf
:
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
Line 34 in 27cd61a
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?
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)
This will pause the timeout when user hovers the notification.
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? :)
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!
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 :)
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.
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!!
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!
Would be great if we could have additional default methods for :
Info (Light Blue Background)
notyf.info({......});
Warning (Orange Background)
notyf.warning({......});
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!
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.
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?
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!
Using findIndex
w/o polyfilling breaks notyf in all available Internet Explorers.
Usage:
Line 73 in 694728e
Can you tell me how to add dismiss button and click action?
Please, add a CDN link version, so we can use this package with only vanilla js.
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.
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
Hi, maybe someone will like it https://jsfiddle.net/9tehLvpx/
It would be amazing to use this in a Svelte project.
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.
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
});
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 ;
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, 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',
});
Probably because there is no .notyf__container
!
Lines 186 to 195 in 45e3272
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
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.
Line 94 in 21cee09
This URL (mentioned in log message about upgrading) is 404'ing
https://docs.psb.codes/redux-promise-middleware/upgrade-guides/v6
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
Was in a process of making PR with some tiny changes. Probably should update dep versions just to be safe.
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.
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*/
}
Hello,
I hope it is ok for you, that I forked your repository and made some extensions:
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
Hello :-)
When setting duration
option to 0
, notification should be visible until the user close/click it (with dismissible
or not) following the documentation.
Setting duration
option to 0
, notification must be visible until the user close/click it.
Setting duration
option to 0
, notification is visible only for a fraction of ms.
Using https://carlosroso.com/notyf/ under Windows 10 Pro 2004 with:
Thanks,
Herve-M
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?
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, 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);
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.
Since Notyf adds Div
s 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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.