{"id":27958309,"url":"https://github.com/91ahmed/nostfly","last_synced_at":"2025-05-07T18:22:00.324Z","repository":{"id":277785646,"uuid":"932976755","full_name":"91ahmed/nostfly","owner":"91ahmed","description":"An elegant javascript notification library featuring smooth animations, flexible positioning, and rich customization options.","archived":false,"fork":false,"pushed_at":"2025-03-02T14:18:09.000Z","size":176,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T02:47:04.359Z","etag":null,"topics":["javascript-message-toaster","javascript-notification","nostfly","nostfly-js","notification","notification-system","notifications","notify","toast-message","toast-notifications"],"latest_commit_sha":null,"homepage":"https://91ahmed.github.io/projects/nostfly/","language":"CSS","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/91ahmed.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":"2025-02-14T21:53:24.000Z","updated_at":"2025-03-04T17:59:44.000Z","dependencies_parsed_at":"2025-02-16T05:22:13.928Z","dependency_job_id":"a2d3a755-1c7b-4bda-8fe7-33af6154dc21","html_url":"https://github.com/91ahmed/nostfly","commit_stats":null,"previous_names":["91ahmed/nostfly"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/91ahmed%2Fnostfly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/91ahmed%2Fnostfly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/91ahmed%2Fnostfly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/91ahmed%2Fnostfly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/91ahmed","download_url":"https://codeload.github.com/91ahmed/nostfly/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931820,"owners_count":21827172,"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":["javascript-message-toaster","javascript-notification","nostfly","nostfly-js","notification","notification-system","notifications","notify","toast-message","toast-notifications"],"created_at":"2025-05-07T18:21:56.221Z","updated_at":"2025-05-07T18:22:00.315Z","avatar_url":"https://github.com/91ahmed.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nostfly\nA lightweight and customizable JavaScript notifications library designed for sleek, non-intrusive alerts. Featuring smooth animations, flexible positioning, and rich customization options, it enhances user experience with effortless integration. Ideal for modern web applications, it supports auto-dismiss, interactive actions, and theme adaptability for a seamless UI.\n\n### Live Demo\n\nExperience Nostfly in action live: [Live Demo](https://91ahmed.github.io/projects/nostfly/) .\n\n\n### Install\nUse the CDN files\n```html\n\u003c!-- Css --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/91ahmed/nostfly/dist/css/nostfly.min.css\"\u003e\n\n\u003c!-- Js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/91ahmed/nostfly/dist/js/nostfly.min.js\"\u003e\u003c/script\u003e\n```\n\nOr download the latest version of Nostfly: [Download Here](https://91ahmed.github.io/projects/nostfly/nostfly.zip)\n```html\n\u003c!-- Css --\u003e\n\u003clink rel=\"stylesheet\" href=\"nostfly.min.css\"\u003e\n\n\u003c!-- Js --\u003e\n\u003cscript src=\"nostfly.min.js\"\u003e\u003c/script\u003e\n```\n\n### Install via npm\n```bash\nnpm i nostfly\n```\n\n### Example\n```javascript\nnew Nostfly ({\n    style: 'warning',\n    position: 'top-right',\n    header: 'Your header here', // accept html\n    content: 'Your content here', // accept html\n    delay: 5000\n})\n```\n\n### Properties \n``style`` :\u003cbr\u003e\n\nYou can select the style that suits you from these options:\n- warning\n- success\n- error\n- attention\n- notify\n- note\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``style`` | _string_ | 'notify'\n\n**e.g**\n```javascript\nnew Nostfly({\n    style: 'success'\n})\n```\n\n\u003chr\u003e\n\n``position`` :\u003cbr\u003e\n\nChange the notification position to one of the following options:\n- top-right\n- top-left\n- top-center\n- bottom-right\n- bottom-left\n- bottom-center\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``position`` | _string_ | 'top-right'\n\n**e.g**\n```javascript\nnew Nostfly({\n    position: 'bottom-right'\n})\n```\n\n\u003chr\u003e\n\n``closeAnimate`` :\u003cbr\u003e\n\nCustomize the close animation by choosing from the following options:\n- nostfly-close-slide-right\n- nostfly-close-slide-left\n- nostfly-close-slide-up\n- nostfly-close-slide-down\n- nostfly-close-fade\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``closeAnimate`` | _string_ | 'nostfly-close-slide-right'\n\n**e.g**\n```javascript\nnew Nostfly({\n    closeAnimate: 'nostfly-close-slide-up'\n})\n```\n\u003cbr\u003e\n\n\u003e **Note:** You can add your own close animation class instead of using the available ones.\n\n\u003cbr\u003e\n\n**e.g**\n```javascript\nnew Nostfly({\n    closeAnimate: 'your-custom-class'\n})\n```\n\n\u003chr\u003e\n\n``openAnimate`` :\u003cbr\u003e\n\nCustomize the open animation by choosing from the following options:\n- nostfly-open-slide-right\n- nostfly-open-slide-left\n- nostfly-open-slide-up\n- nostfly-open-slide-down\n- nostfly-open-fade\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``openAnimate`` | _string_ | 'nostfly-open-slide-right'\n\n**e.g**\n```javascript\nnew Nostfly({\n    openAnimate: 'nostfly-open-slide-up'\n})\n```\n\n\u003cbr\u003e\n\n\u003e **Note:** You can add your own open animation class instead of using the available ones.\n\n\u003cbr\u003e\n\n**e.g**\n```javascript\nnew Nostfly({\n    openAnimate: 'your-custom-class'\n})\n```\n\n\u003chr\u003e\n\n``loader`` :\u003cbr\u003e\n\nYou can choose whether to display the loader or not by changing the loader value to false or true.\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``loader`` | _boolean_ | true\n\n\u003chr\u003e\n\n``loaderPosition`` :\u003cbr\u003e\n\nYou can set the loader position to either top or bottom.\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``loaderPosition`` | _string_ | 'top'\n\n\u003chr\u003e\n\n``delay`` : \u003cbr\u003e\n\nYou can set the delay time in **(milliseconds)** by change this property value.\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``delay`` | _number_ | 4000\n\n\u003chr\u003e\n\n``auto`` :\u003cbr\u003e\n\nAutomatically remove the notification after the specified delay time expires.\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``auto`` | _boolean_ | true\n\n\u003chr\u003e\n\n``iconHeader`` :\u003cbr\u003e\n\nYou can remove the default **icon header** by change the property value to false.\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``iconHeader`` | _boolean_ | true\n\n**e.g**\n```javascript\nnew Nostfly({\n    iconHeader: false,\n    header: 'Your New Header'\n})\n```\n\n\u003chr\u003e\n\n``class`` :\u003cbr\u003e\n\nThis property allow you to add a custom **CSS** class to the notification container.\n\n**Property** | **Type** | **Default**\n:--- | :--- | :---\n``class`` | _string_ | null\n\n\u003chr\u003e\n\n### Full Example\n```javascript\nnew Nostfly ({\n    style: 'attention',\n    class: 'custom-class',\n    position: 'bottom-right',\n    closeAnimate: 'nostfly-close-slide-right',\n    openAnimate: 'nostfly-open-slide-right',\n    background: '#F85525',\n    color:'#FBFAF2',\n    iconHeader: true,\n    header: 'Hello Geist', // accept html\n    content: 'Please reach me out as soon as possible.', // accept html\n    auto: true,\n    loader: true,\n    delay: 6000\n})\n```\n\n\u003cimg src=\"https://github.com/91ahmed/nostfly/blob/v1.0/nostfly.png?raw=true\" style=\"width:300px;margin:auto;display:block\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F91ahmed%2Fnostfly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F91ahmed%2Fnostfly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F91ahmed%2Fnostfly/lists"}