{"id":34839135,"url":"https://github.com/dknight/xz-notify","last_synced_at":"2026-05-23T11:38:22.548Z","repository":{"id":159444014,"uuid":"632911198","full_name":"dknight/xz-notify","owner":"dknight","description":"Notifications based on web components","archived":false,"fork":false,"pushed_at":"2024-11-15T21:50:04.000Z","size":303,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T07:48:42.971Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/dknight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2023-04-26T11:38:09.000Z","updated_at":"2024-11-15T21:50:07.000Z","dependencies_parsed_at":"2023-06-18T13:52:46.689Z","dependency_job_id":"840786ce-4e59-4a6f-b237-aef550cc710d","html_url":"https://github.com/dknight/xz-notify","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/dknight/xz-notify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dknight%2Fxz-notify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dknight%2Fxz-notify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dknight%2Fxz-notify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dknight%2Fxz-notify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dknight","download_url":"https://codeload.github.com/dknight/xz-notify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dknight%2Fxz-notify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33394668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-12-25T16:59:46.260Z","updated_at":"2026-05-23T11:38:22.543Z","avatar_url":"https://github.com/dknight.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# XZ Notify\n\n[![License MIT](https://img.shields.io/npm/l/xz-notify)](https://github.com/dknight/xz-notify/blob/main/LICENSE)\n[![Build](https://github.com/dknight/xz-notify/actions/workflows/node.js.yml/badge.svg)](https://github.com/dknight/xz-notify/actions/workflows/node.js.yml)\n[![Version](https://img.shields.io/npm/v/xz-notify)](https://www.npmjs.com/package/xz-notify)\n\nXZNotify is a framework-agnostic web component to shows floating notifications on the web page.\n\nCheck out the [demo page](https://dknight.github.io/xz-notify/) for more examples.\n\n## Install\n\n[NPM Package](https://www.npmjs.com/package/xz-notify)\n\n```sh\nnpm install --save xz-notify\n```\n\nOr just download the source and include it in your HTML.\n\n## Usage\n\nYou can create as many notifications as you want. These will be automatically positioned and removed from the DOM after they expire or are closed.\n\nXZNotify is a module. First of all, you need to include it in your project. At the moment, there are two ways to do it:\n\n### script tag way\n\n```html\n\u003cscript type=\"module\" src=\"./xz-notify.js\"\u003e\u003c/script\u003e\n```\n\n#### CDN\n\nJust include link from CDN and you are ready to go.\n\n```html\n\u003c!-- preferably in \u003chead\u003e --\u003e\n\u003cscript\n  src=\"https://unpkg.com/xz-notify@latest/dist/xz-notify.min.js\"\n  type=\"module\"\n\u003e\u003c/script\u003e\n\u003c!-- inside \u003cbody\u003e --\u003e\n\u003cxz-notify expire=\"150000\"\u003eHello world!\u003c/xz-notify\u003e\n```\n\n### import way\n\n```js\nimport XZNotify from 'xz-notify';\n```\n\nAfter being added, there will be a custom HTML element `\u003cxz-notify\u003e` defined in your document.\n\n### Basic usage\n\nThe notification can be inserted directly into your HTML, and it will be destroyed as soon as it expires.\n\n```html\n\u003cxz-notify type=\"info\" expire=\"10000\" position=\"ne\"\u003e Hello world! \u003c/xz-notify\u003e\n```\n\nAnother way is to make it programmatically and append it to any element, but `\u003cbody\u003e` or something like `\u003cmain\u003e` is recommended.\n\n```js\nconst notification = XZNotify.create('Hello world', {\n  type: 'info',\n  expire: 10000,\n  position: 'ne',\n});\ndocument.body.appendChild(notification);\n```\n\n## API\n\n### XZNotify\n\nClass has some properties that are reflected in HTML attributes.\n\n| name      | type    | default   | description.                                                                                                                                                                                                                          |\n| --------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| expire    | number  | 10000     | Time in milliseconds. How long the notification will be displayed. If expire is zero or less, the notification will be closed immediately. If the expiration value cannot be parsed into a number, then the default fallback is used. |\n| type      | string  | \"default\" | Type of the notification. There are built-in types: default, info, success, warning, and error.                                                                                                                                       |\n| position  | string  | \"ne\"      | Position of the notification o the screen. Position corresponds to point of compass: n (north), ne (north-east), s (south), etc.                                                                                                      |\n| closeable | boolean | false     | If it is set, clicking on the notification will close it.                                                                                                                                                                             |\n| grouped   | boolean | false     | If grouped is set, then the offset position is not recalculated and notifications are stacked.                                                                                                                                        |\n| heading   | string  | null      | The heading of the notification.                                                                                                                                                                                                      |\n\n### create(content, attributes?, trusted?)\n\nMethod to create XZNotify instance.\n\n| name       | type    | default | description                                                           |\n| ---------- | ------- | ------- | --------------------------------------------------------------------- |\n| content    | string  |         | Content of the notification.                                          |\n| attributes | Object  | {}      | Attributes of the `\u003cxz-notify\u003e` element.                              |\n| trusted    | boolean | false   | If `true` then HTML is allowed in content. Might not be safe for XSS. |\n\n### Events\n\nNotification dispatches custom events on the open state and when expired.\n\n| event name      | detail   |\n| --------------- | -------- |\n| xz-notify:open  | XZNotify |\n| xz-notify:close | XZNotify |\n\n```js\ndocument.body.addEventListener('xz-notify:open', (e) =\u003e console.log(e));\ndocument.body.addEventListener('xz-notify:close', (e) =\u003e console.log(e));\n```\n\n### Collection\n\nXZNotify class has static `collection` variable which contains currently opened and live notifications.\n\n```js\nXZNotify.collection; // -\u003e NodeList\u003cXZNotify\u003e\nXZNotify.collection.length; // 0 - means that none of live notifications exist\n```\n\n## Styling\n\nUse the full power of CSS to style notifications. Just declare style wherever you want and overwrite defaults in the manner of:\n\n```css\nxz-notify {\n  border: 2px solid #000;\n  color: #000;\n  background: none;\n  /* etc... */\n}\n```\n\n### Custom properties\n\nXZNotify exposes some useful CSS custom properties. Most likely, you won't change them manually.\n\n- `--xz-notify-heading-color`\n- `--xz-notify-zIndex`\n- `--xz-notify-background-color`\n\n### Themes\n\nInclude the theme in the HTML file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"bootstrap.css\" /\u003e\n```\n\nAt the moment, there are some built-in themes. More themes will be added in future.\n\n- default\n- bootstrap\n- simple\n- bar\n\n## Contribution\n\nAny help is appreciated. Found a bug, typo, inaccuracy, etc.?\nPlease do not hesitate to make a pull request or file an issue.\n\n## License\n\nMIT 2023\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdknight%2Fxz-notify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdknight%2Fxz-notify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdknight%2Fxz-notify/lists"}