toaster-ts is a JavaScript library to show toast notifications in your website.
⚠️ WARNING: This library is still a work in progress!⚠️ Please, be aware that while this library is being actively developed and improved, there may be instability and breaking changes.
To start using the library, install it in your project:
npm install toaster-tsAdd <section id="toaster-wrapper"></section> inside <body> element. That will be the container for all the notifications.
You can customize the position by adding the data-position attribute. See the example below:
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
...
<section
id="toaster-wrapper"
data-position="bottom-left" />
</body>
</html>Import the stylesheet
@import 'toaster-ts/dist/bundle.css';Then, you can use toast() from anywhere in your app.
import { toast } from 'toaster-ts';
toast('My first toast');This library has been deeply inspired by Sonner, an opinionated toast component for React. Thanks to its author, Emil Kowalski