npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@imadkurdi/toast-msg

v1.0.0

Published

This is a toast-msg component: developers could create several toast messages. They will appear stacked on top of each other, and they will disappear automatically after a certain amount of time. It is a standard custom web component written in pure vanil

Downloads

15

Readme

toast-msg component

Example demonstrating the use of the toast-msg component

This is a toast-msg component: developers could create several toast messages. They will appear stacked on top of each other, and they will disappear automatically after a certain amount of time. It is a standard custom web component written in pure vanilla JS, so it could be used in any framework.

With the package you will find a complete functional example.html

Usage:

Import the class of this component ToastMsg, then use its constructor to create a toast message: const toast = new ToastMsg(content, msgTime, rtl); where:

  • content: represents the content of the toast message.
    • could be a boolean type: if true => OK toast, if false => NO toast
    • could be undefined (you do not pass anything): the same as if you pass boolean true
    • could be a string: you pass the message that you want to show.
  • msgTime: the toast message, when appended to the document, will slid-in in 500 ms, will be shown for msgTime in ms (no-motion time), finally will slide-out in 500 ms:
    • could be a number to represent the no-motion time in ms.
    • could be undefined: in this case the no-motion time depends on the content of the message, and will be calculated according to this formula: min(5000, max(500, 60 * content.length)) which means that the no-motion time will be proportional to the length of the message, but should never be outside the range [500, 5000] ms.
  • rtl: Right-to-Left or Left-to-Right.
    • could be a string: rtl => the component will behave in a way compatible with Right-to-Left hand writing systems; it will slide-in from the right-hand side of the screen. For any other string value, the component will behave in a way compatible with Left-to-Right hand writing systems: it will slide-in from the left-hand side of the screen.
    • could be a boolean type: if true => as if passed the string rtl, if false => as if passed the string ltr.
    • could be undefined (you do not pass anything): the same as if you pass boolean false
    import ToastMsg from "./toast-msg.js";
    
    document.body.appendChild(new ToastMsg());
    document.body.appendChild(new ToastMsg(false));
    document.body.appendChild(new ToastMsg(true, 1000));
    document.body.appendChild(new ToastMsg("any message"));
    document.body.appendChild(new ToastMsg("this message will appear from the right-hand side of the screen", "", "rtl"));

Styling:

The component is simply a standard div element and you can reach it through ::part(container)

::part(container) { background-color: lightgray; }