Toasteur.js
Create beautiful and customizable toast nitifications
Example
A simple example of the usage of the library is provided in this repository.
JsDelivr
<script src="https://cdn.jsdelivr.net/gh/SkwalExe/Toasteur.js@v0.5.0/dist/toasteur.min.js"></script>
NPM module
Install the npm module
npm install toasteur
And import it in your project
const Toasteur = require('toasteur');
let myToasteur = new Toasteur("top-right");
browserify index.js -o bundle.js
Setting up
You can import the library into you website with JsDelivr or, you can use the npm module and import it in your project.
You also need to import the css file to your website
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toasteur@0.5.0/dist/themes/toasteur-default.min.css">
🍞
Your first toasts Changing the default position
let myToasteur = new Toasteur("bottom-left"); // top-right by default
Accepted values are:
- top-left
- top-right
- bottom-left
- bottom-right
- top-center
- bottom-center
Changing the default duration
let myToasteur = new Toasteur("bottom-left", 5000);
// 5000 by default
The notification will be displayed for 5 seconds
Putting notifications on the top/bottom of the pile
You can choose to put the new notifications on the top or bottom of the pile.
let myToasteur = new Toasteur("bottom-left", 5000, "top");
// can be "top" or "bottom" ^^^^
Adding custom html to your toast content
You can allow custom html in your toast content.
let myToasteur = new Toasteur("bottom-left", 5000, "top", true);
// false by default ^^^^
myToasteur.warn("This is a <span class='myClass'>warning</span> message, Click me!", 'Warning!')
// ^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^
// Here we use html to add a custom class to the word "warning"
Creating a toast notification
To create toast notifications, you can use the following methods:
-
success:
myToasteur.success()
-
error:
myToasteur.error()
-
warning:
myToasteur.warn()
-
info:
myToasteur.info()
This functions can take 3 arguments, the first one is required :
- The message to display
- The title of the message (optional)
- Callback when the toast is clicked (optional)
✅
Success myToasteur.success("This is a success message, click me!", "Success!", () => {
console.log("Clicked!");
});
⛔
Errors myToasteur.error("This is an error, click me!", "Error!", () => {
console.log("Clicked!")
});
⚠️
Warning myToasteur.warn("This is a warning, click me!", "Warning!", () => {
console.log("Clicked!");
});
ℹ️
Info myToasteur.info("This is an info, click me!", "Info!", () => {
console.log("Clicked!");
});
Why toasteur.js?
I wanted to add toast notifications to one of my websites, then I remembered the ones I saw on HackTheBox, so I went there looking for the name of the library that they used, and I found it.
It was Toastr.js, I added the library to my website, and tried to create my first toast notification.
And BOOM, nothing happened. I went in the console, and I found this error:
Uncaught ReferenceError: $ is not defined
It was after 10 seconds of reading the documentation that I realized that this library required jQuery.
For technical reasons I couldn't add jQuery to my website, but I really liked the style of Toastr.js, and I didn't found anything similar on the web.
So I decided to create my own toast notification library.
I named it Toasteur.js, because I wanted to make it similar to Toastr.js and because I'm french Toaster
is written Toasteur
.
final
If you have any problem, don't hesitate to open an issue
💪
Contributing -
Start by forking this repository
-
Then clone your fork to your local machine.
git clone https://github.com/your-username/Toasteur.js.git
- Install dev dependencies
npm install --save-dev
- Create a new branch
git checkout -b super-cool-feature
-
Then make your changes
-
Update the changelog and version number if needed (using Semantic Versioning) also, update the version number in the JsDelivr links (js and css)
# bug fix
npm version patch --no-git-tag-version
# add a new feature
npm version minor --no-git-tag-version
# changes that break backwards compatibility
npm version major --no-git-tag-version
- List and correct linting errors
npm run lint
- Update the minified/browser version of the library
npm run build
- Once you're done, commit your changes and push them to the remote repository.
git add --all
git commit -m "Add super-cool-feature"
git push origin super-cool-feature
- Then, open a pull request on GitHub from your fork.
- Go to this link
- Click compare across forks
- On the right, on
head repository
select your fork - And on
compare
select the branch you just created - Click on
Create Pull Request
and submit your pull request