@carlos-molero/toaster v2.1.0

Installation

npm i @carlos-molero/toaster or yarn add @carlos-molero/toaster

When you are done installing the package, import in your client-side code with:

import Toaster from "./node_modules/@carlos-molero/toaster/index.js"

Usage

Most of the internal functions and variables are prefixed with underscore as the convention dictates. Those shouldn't be used because can produce an unexpected behaviour.

setGeneralStyles({args})

Set the general styles for all the toasts, not provided properties will fallback to default ones:

  static _general: ToasterGeneralProps = {
    borders: "round",
    iconFill: "black",
    iconBackground: "#F3EEED",
    textColor: "white",
    assets: {
      warning: {
        background: "#E78D0D",
      },
      error: {
        background: "#E43423",
      },
      info: {
        background: "#1469F5",
      },
      success: {
        background: "#3BE515",
      },
    },
    fontfamily: "'Quicksand', sans-serif",
  };

If you want to use icons with your toast messages, I'm currently supporting this through Font Awesome classes. Every AssetObject contains a property called faclass where you can pass the font awesome icon class.

Toaster({args})

The way of launching toast messages, just create a new instance and provide configuration related to alignment, position...

This is the whole object:

_props: ToasterProps = {
  header: "",
  message: "",
  duration: 1.5,
  alignment: "left",
  position: "top",
  delay: 0.3,
  type: "info",
  whenEnded: undefined,
};

header and message props are required, their absence will display an error and stop the launch. whenEnded serves as a callback function to run after the toast is gone.

createTemplate({args}, templateName)

Creates a template that is stored globally, you can use these templates to reuse and shorten the code to launch a toast message.

Toaster.createTemplate(
  {
    position: "bottom",
    alignment: "center",
    type: "info",
    duration: 2.5,
  },
  "myTemplate"
);

new Toaster(undefined, "myTemplate", "Hello", "world");

If template name is not found an error will be displayed stopping the launch.

Contribution

Feel like you can add to this project? Don't hesitate, always open for contributions.

1. Fork the repo
2. Create a new branch [feat | fix | re] /short title
3. Add or change a test if needed
4. Submit a PR

License

This project is under MIT LICENSE in the name of Carlos Molero. Uploading this project to any other place than the present one without explicit consent and attribution is prohibited.