jb-notification

notification ui web component to show notification directly from pure js code without any framework

• no dependency.
• works with every JS structure and do not depend on any frameworks.
• bold with smooth animation.
• easy to use and accessible.

Demo

storybook
code sandbox

set title & description

document.querySelector('jb-notification').title = "Information Message";
document.querySelector('jb-notification').description = "optional detail about what happen you may not set it";

    <jb-notification title="message title" description="description below title text to tell more about what happen"></jb-notification>

set notification type

document.querySelector('jb-notification').type = "SUCCESS";

    <jb-notification title="message title" type="SUCCESS"></jb-notification>

MessageTypes:

we have several types of message the types are : SUCCESS,ERROR,WARNING,INFO;

document.querySelector('jb-notification').type = `SUCCESS`;

wrapper

jb-notification is a independent module block to show notification but in most cases you need a wrapper dom to wrap and manage all the notifications and their positions. although you can create your own wrapper dom in you body and append <jb-notification> dom to it, we also make <jb-notification-wrapper> with some functionality to manage your notifications.
using this wrapper in easy. just put <jb-notification-wrapper></jb-notification-wrapper> somewhere in your dom tree and then append your <jb-notification> dom to it.
here is a compact sample:

  const notificationDom = document.createElement('jb-notification') as JBNotificationWebComponent;
  notificationDom.title = title;
  if(type){ notificationDom.type = type};
  if(desc){notificationDom.description = desc};
  const wrapperDpm = document.querySelector('jb-notification-wrapper')
  notificationDom.addEventListener("close", ()=>wrapperDom.removeChild(e.target));
  wrapperDpm.appendChild(notificationDom)

Other Related Docs:

• see All JB Design system Component List for more components

• use Contribution Guide if you want to contribute in this component.