{"id":26244033,"url":"https://github.com/shystruk/notification-service-js","last_synced_at":"2025-04-23T14:34:48.258Z","repository":{"id":32830647,"uuid":"143842692","full_name":"shystruk/notification-service-js","owner":"shystruk","description":"🚦Notification Service based on Custom Elements","archived":false,"fork":false,"pushed_at":"2023-04-29T00:53:54.000Z","size":1459,"stargazers_count":17,"open_issues_count":5,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T00:31:40.566Z","etag":null,"topics":["custom-elements","javascript","notification","notification-service","pattern-library","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/notification-service-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shystruk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-07T08:23:46.000Z","updated_at":"2023-02-14T17:19:04.000Z","dependencies_parsed_at":"2024-06-20T22:11:01.880Z","dependency_job_id":null,"html_url":"https://github.com/shystruk/notification-service-js","commit_stats":null,"previous_names":["shystruk/notification-service"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fnotification-service-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fnotification-service-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fnotification-service-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fnotification-service-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shystruk","download_url":"https://codeload.github.com/shystruk/notification-service-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250152548,"owners_count":21383536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","javascript","notification","notification-service","pattern-library","webcomponents"],"created_at":"2025-03-13T10:38:49.606Z","updated_at":"2025-04-23T14:34:48.236Z","avatar_url":"https://github.com/shystruk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Notification Service [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?hashtags=javascript%20%23webcomponents\u0026original_referer=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonHashtag%3Djavascript%2520%2523webcomponents%26buttonText%3DNotification%2520Service%2520based%2520on%2520Custom%2520Elements.%2520Integrate%2520everywhere.%26buttonType%3DTweetButton%26buttonUrl%3Dhttps%253A%252F%252Fgithub.com%252Fshystruk%252Fnotification-service-js%26buttonVia%3Dshystrukk%26widget%3DButton\u0026ref_src=twsrc%5Etfw\u0026text=Notification%20Service%20based%20on%20Custom%20Elements.%20Integrate%20everywhere.\u0026tw_p=tweetbutton\u0026url=https%3A%2F%2Fgithub.com%2Fshystruk%2Fnotification-service-js\u0026via=shystrukk) #\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/notification-service-js) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![npm version](https://badge.fury.io/js/notification-service-js.svg)](https://badge.fury.io/js/notification-service-js) [![Known Vulnerabilities](https://snyk.io/test/github/shystruk/notification-service-js/badge.svg?targetFile=package.json)](https://snyk.io/test/github/shystruk/notification-service-js?targetFile=package.json)\n\n\nNotification Service provides a simple show/hide message. It is based on [CustomElements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) and may be integrated with any framework. Push notification works through [CustomEvent](https://www.npmjs.com/package/custom-event-js) dispatcher.\n**Notification Service supports all popular browsers, including Internet Explorer 11, although some polyfills are required for IE 11. Please see [here](https://www.webcomponents.org/polyfills).** \n\n\n![](Demo_Original.gif)\n\n\n## Installation ##\n#### npm\n`npm install notification-service-js`\n\n#### yarn\n`yarn add notification-service-js`\n\n## Usage ##\n```javascript\n// As a module\nimport 'notification-service-js'\n\n// As a \u003cscript\u003e tag\n\u003cscript src=\"node_modules/notification-service-js/build/notification-service.js\"\u003e\u003c/script\u003e\n\n// Insert web component into the DOM\n\u003cnotification-service\u003e\u003c/notification-service\u003e\n```\n\n### Push notification\n```javascript\nCustomEvent.DISPATCH('WEB_COMP_SHOW_NOTIFICATION', {\n    type: 'success', // success, error, warning\n    message: 'Your message has been sent',\n    timer: 3000 // default 5000, not required\n})\n```\n\n## Options\n```javascript\nCustomEvent.DISPATCH('EVENT_NAME', options)\n```\n\n### type ###\nType: `string` \u003cbr\u003e\nValues: `success, error, warning` \u003cbr\u003e\n\nA class which will be added to the notification content `.web-nc-content.\u003ctype\u003e`. Depends on the class CSS styles will be applied to the content. You can add your own type and add styles through the prop `cross-img-src`.\n\n### message ###\nType: `string` \u003cbr\u003e\n\nContent which will be displayed inside notification.\n\n### timer ###\nType: `number` \u003cbr\u003e\nDefault: 5000 \u003cbr\u003e\n\nTime in milliseconds how long notification will be showing.\n\n\n## Props\n### cross-img-src ###\nThe path to an image (png/svg/jpg) file, which will be used for a cross icon.\n```html\n\u003cnotification-service cross-img-src=\"../images/cross.svg\"\u003e\u003c/notification-service\u003e\n```\n\n### style-src ###\nThe path to .css file, which will be pasted after common styles.\n\n```html\n\u003cnotification-service style-src=\"build/style.css\"\u003e\u003c/notification-service\u003e\n```\n![](Demo_Props.gif)\n\n## Contributing\n\nAny contributions you make **are greatly appreciated**.\n\nPlease read the [Contributions Guidelines](CONTRIBUTING.md) before submitting a PR.\n\n## License\n\nMIT © [Vasyl Stokolosa](https://about.me/shystruk)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshystruk%2Fnotification-service-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshystruk%2Fnotification-service-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshystruk%2Fnotification-service-js/lists"}