Installation
npm install sonner-js
Usage
Render the toaster in the root of your app.
<head>
<link rel="stylesheet" href="sonner-js/sonner.css">
<script defer src="sonner-js/sonner.js"></script>
</head>
<body>
<div id="toaster-wrapper"></div>
<button class="button"
onclick="toast.default('Event has been created')">Default</button>
</body>Types
You can customize the type of toast you want to render, and pass an options object as the second argument.
<script src="sonner-js/toaster.js"></script>
<script src="sonner-js/toaster.js"></script>
<script src="sonner-js/toaster.js"></script>
Position
Swipe direction changes depending on the position.
<script src="sonner-js/toaster.js"></script>
<script src="sonner-js/toaster.js"></script>
<script src="sonner-js/toaster.js"></script>
Expand
You can change the amount of toasts visible through the visibleToasts prop.
<script src="sonner-js/toaster.js"></script>
<script src="sonner-js/toaster.js"></script>
<script src="sonner-js/toaster.js"></script>
Other
Want to learn how to make components like this one?
Emil is working on a course about animations on the web, you can check it out here .