nota-fucation

WHAT NOTA-FUCATION IS

• Awesome toast notification package with 0 dependencies (super light weight)!
• Quick and easy to setup and use
• Minimal impact on your code
• Native web components implementation for fully isolated styling and functionality

INSTALLATION

1. Install nota-fucation into your project

npm i --save nota-fucation

or

yarn add nota-fucation

nota-fucation is designed to work as-is and be served statically.

• UNPKG - cdn that serves npm packages directly, keep in mind the security implications of using a script cdn before you settle on this one long term. CDN's are great but I think any of them would suggest to not use them if you are handling sensitive data. Just one more avenue of attack for your site.
• Serve yourself - Either copy files automatically after install to your static directory or install directly there (I know this can be done cleanly with yarn with it's configurable modules-folder option, not sure how to do it with npm).
• Bundle - We haven't tested this method, good luck ☺

1. Place a script tag in your public index.html file that imports Nota-Fucation's index.js. Place the import in your tag, for example:

<script src='path/to/nota-fucation/index.js' type='module'></script>

1. In the same file (index.html), place this inside your tag. For it to display appropriately over all other content, it should be right before the close body tag

<nota-fucation></nota-fucation>

Let us handle the rest. Our component and shadow dom listen for your notaToast events and will position everything appropriately.

USAGE NOTES

There are two main ways to open a toast, the first requires no special code or requires aside from the install instructions above. Simply create a new Event, set the supported properties on the object, and dispatch that Event to the DOM. The second method uses some small helper functions we've included for convenience, but all they do is wrap the creation and dispatch into a handy one-liner function. For our examples below we only show off the first method which is ultimately more flexible.

Supported properties on events

property name	effect
message	text you'd like to display on the toast
hideCloseButton	show/hide the close button on the toast
maxTime	milliseconds the toast will display before auto closing
class	the type of toast to display, one of ["danger", "warn", "info", "error", "success", "failure"]
position	which corner the toast will be anchored to, one of ["top-left", "top-middle", "top-right", "bottom-left", "bottom-middle", "bottom-right"]

USAGE EXAMPLES

React

Although this library is written in native web components, it works great in React as well! It just requires a little setup.

1. In any react js/jsx file, create an event of type "notaToast" and add parameters you want, such as a custom message. Here's an example:

import React from 'react';
import './App.css';

const handleClick = () => {
  const notafucation = new Event('notaToast');
  notafucation.position = "bottom-middle";
  notafucation.message = "What a wonderful Nota-Fucation";
  document.dispatchEvent(notafucation);
}

function App() {
  return (
    <div className="App">
      <button onClick={handleClick}>click me</button>
    </div>
  );
}

export default App;

1. Enjoy your many reactified Nota-Fucations!

Vue

Coming soon

Vanilla JS

<form onsubmit="event.preventDefault(); let a = new Event('notaToast'); a.message = 'asdf asdf '; a.class='success'; document.dispatchEvent(a);">
  <button type="submit">Success</button>
</form>
...
<nota-fucation></nota-fucation>

CONFIGURATION

changing the defaults

Coming soon

Styling your toasts

Until the ::part and ::theme CSS standards are finished and implemented we offer styling through CSS variables. Our variable names are long yes, but we are opting for clarity over brevity.

The variables provided follow the pattern --nota-{type}-{property} where we tried to keep the properties names consistent with the property it affects. For example --nota-warn-border-color will change the border-color property of the warn event toasts. In addition, the --nota-default... properties will set that value for ALL toasts unless overridden for the specific type.

Where sub elements are affected another segment is added to the variable name to indicate the section of the toast affected. (e.g. --nota-warn-progress-background-color)

Additional customization is planned, we're just evaluating what properties it makes sense to expose. With everything having to be CSS variables right now exposing more means lower performance so we want to only expose what is needed.

css variable	effect	toast type
--nota-button-background-color	button background color	all
--nota-button-text-color	button color	all
--nota-default-color	color	undefined
--nota-default-border-color	border-color	undefined
--nota-default-background-color	background-color	undefined
--nota-default-progress-opacity	progress bar opacity	undefined
--nota-default-progress-color	progress bar color	undefined
--nota-danger-color	color	danger
--nota-danger-border-color	border-color	danger
--nota-danger-background-color	background-color	danger
--nota-danger-progress-opacity	progress bar opacity	danger
--nota-danger-progress-color	progress bar color	danger
--nota-failure-color	color	failure
--nota-failure-border-color	border-color	failure
--nota-failure-background-color	background-color	failure
--nota-failure-progress-opacity	progress bar opacity	failure
--nota-failure-progress-color	progress bar color	failure
--nota-warn-color	color	warn
--nota-warn-border-color	border-color	warn
--nota-warn-background-color	background-color	warn
--nota-warn-progress-opacity	progress bar opacity	warn
--nota-warn-progress-color	progress bar color	warn
--nota-success-color	color	success
--nota-success-border-color	border-color	success
--nota-success-background-color	background-color	success
--nota-success-progress-opacity	progress bar opacity	success
--nota-success-progress-color	progress bar color	success
--nota-info-color	color	info
--nota-info-border-color	border-color	info
--nota-info-background-color	background-color	info
--nota-info-progress-opacity	progress bar opacity	info
--nota-info-progress-color	progress bar color	info

Features under consideration or in progress

• configuration of certain toast behavior globally, no need to pass your defaults to every toast call
• shown limit - put new toasts in a queue and only show a set number at a time feeding automatically from the queue as the oldest expires
• toast lifecycle overrides - allow more control over toast lifecycle with smart defaults for those who don't need it
• toggling of various behaviors - (showing progress bar, no timeout, progress bar render options (smooth, once a second, show seconds instead of a bar, etc...))