{"id":13515659,"url":"https://github.com/caroso1222/notyf","last_synced_at":"2025-05-14T05:09:25.575Z","repository":{"id":37251655,"uuid":"67010595","full_name":"caroso1222/notyf","owner":"caroso1222","description":"👻     A minimalistic, responsive, vanilla JavaScript library to show toast notifications.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:23:47.000Z","size":1114,"stargazers_count":2748,"open_issues_count":45,"forks_count":199,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-05-10T23:15:08.712Z","etag":null,"topics":["custom-toast","notifications","toast","toastr"],"latest_commit_sha":null,"homepage":"https://carlosroso.com/notyf/","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/caroso1222.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-31T06:38:47.000Z","updated_at":"2025-05-10T08:39:43.000Z","dependencies_parsed_at":"2023-02-06T11:46:10.867Z","dependency_job_id":null,"html_url":"https://github.com/caroso1222/notyf","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caroso1222%2Fnotyf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caroso1222%2Fnotyf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caroso1222%2Fnotyf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caroso1222%2Fnotyf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caroso1222","download_url":"https://codeload.github.com/caroso1222/notyf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076839,"owners_count":22010611,"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-toast","notifications","toast","toastr"],"created_at":"2024-08-01T05:01:14.365Z","updated_at":"2025-05-14T05:09:25.467Z","avatar_url":"https://github.com/caroso1222.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components / UI Tools"],"sub_categories":[],"readme":"# Notyf\n[![npm version](https://badge.fury.io/js/notyf.svg)](https://badge.fury.io/js/notyf)\n[![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://cypress.io)\n[![npm downloads](https://img.shields.io/npm/dm/notyf.svg)](https://npmjs.org/notyf)\n[![size](https://img.shields.io/bundlephobia/minzip/notyf.svg?color=54CA2F\u0026style=popout)](https://npmjs.org/notyf)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/notyf/badge?style=rounded)](https://www.jsdelivr.com/package/npm/notyf)\n\n\nNotyf is a minimalistic JavaScript library for toast notifications. It's responsive, A11Y compatible, dependency-free and tiny (~3KB). Easy integration with React, Angular, Aurelia, Vue, and Svelte.\n\n![demo gif](https://user-images.githubusercontent.com/3689856/78058753-635e7700-734e-11ea-9902-2dc5a60a065e.gif)\n\n## Features\n\n- 📱 Responsive\n- 👓 A11Y compatible\n- 🔥 Strongly typed codebase (TypeScript Typings readily available)\n- ⚡️ 4 types of bundles exposed: ES6, CommonJS, UMD, and IIFE (for vanilla, framework-free usage).\n- 🎯 End-to-end testing with Cypress\n- 🎸 Easily plugable to modern frameworks. Recipes available to integrate with React, Angular, Aurelia, Vue, and Svelte.\n- ✨ Optional ripple-like fancy revealing effect\n- 😈 Simple but highly extensible API. Create your own toast types and customize them.\n- 🎃 Support to render custom HTML content within the toasts\n- 🐣 Tiny footprint (\u003c3K gzipped)\n- 👴🏽 Works on IE11\n\n**Demo:** [carlosroso.com/notyf](http://carlosroso.com/notyf/)\n\n## Installation\n\n```\nnpm i notyf\n```\n\n## Usage\n\nThis section explains the base case using the minified bundle. See the [quick recipes](recipes/README.md) section for instructions to plug Notyf into Angular, React, Aurelia, Vue, or Svelte.\n\nAdd the css and js files to your main document:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    ...\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e Files are delivered via CDN by [jsdeliver](https://www.jsdelivr.com/)\n\n### Basic\n\n```javascript\n// Create an instance of Notyf\nvar notyf = new Notyf();\n\n// Display an error notification\nnotyf.error('You must fill out the form before moving forward');\n\n// Display a success notification\nnotyf.success('Your changes have been successfully saved!');\n```\n\n### With module bundlers\n\nNotyf ships with an ES6 bundle referenced from the `module` key of its package.json. This is the file that module bundlers like Webpack will use when using the package. `Notyf` is exported as a class under the `notyf` namespace. Typings are also available.\n\n```javascript\nimport { Notyf } from 'notyf';\nimport 'notyf/notyf.min.css'; // for React, Vue and Svelte\n\n// Create an instance of Notyf\nconst notyf = new Notyf();\n\n// Display an error notification \nnotyf.error('Please fill out the form');\n```\n\n## API\n\nYou can set some options when creating a Notyf instance.\n\n### `new Notyf(options: INotyfOptions)`\n\nParam | Type | Default | Details\n------------ | ------------- | ------------- | -------------\nduration | `number` | 2000 | Number of miliseconds before hiding the notification. Use `0` for infinite duration.\nripple | `boolean` | true | Whether to show the notification with a ripple effect\nposition | [`INotyfPosition`](#inotyfposition) | `{x:'right',y:'bottom'}` | Viewport location where notifications are rendered\ndismissible | `boolean` | false | Whether to allow users to dismiss the notification with a button\ntypes | [`INotyfNotificationOptions[]`](#inotyfnotificationoptions) | Success and error toasts | Array with individual configurations for each type of toast\n\n### `dismiss(notification: NotyfNotification)`\n\nDismiss a specific notification.\n\n```javascript\nconst notyf = new Notyf();\nconst notification = notyf.success('Address updated');\nnotyf.dismiss(notification);\n```\n\n### `dismissAll()`\n\nDismiss all the active notifications.\n\n```javascript\nconst notyf = new Notyf();\nnotyf.success('Address updated');\nnotyf.error('Please fill out the form');\nnotyf.dismissAll();\n```\n\n## Events\n\nEvery individual notification emits events. You can register listeners using the `on` method.\n\n### `'click'`\n\nTriggers when the notification is clicked\n\n```javascript\nconst notyf = new Notyf();\nconst notification = notyf.success('Address updated. Click here to continue');\nnotification.on('click', ({target, event}) =\u003e {\n  // target: the notification being clicked\n  // event: the mouseevent\n  window.location.href = '/';\n});\n```\n\n### `'dismiss'`\n\nTriggers when the notification is **manually** (not programatically) dismissed.\n\n```javascript\nconst notyf = new Notyf();\nnotyf\n  .error({\n    message: 'There has been an error. Dismiss to retry.',\n    dismissible: true\n  })\n  .on('dismiss', ({target, event}) =\u003e foobar.retry());\n```\n\n## Interfaces\n\n### INotyfPosition\n\nViewport location where notifications are rendered.\n\nParam | Type | Details\n------------ | ------------- | -------------\nx | `left \\| center \\| right` | x-position\ny | `top \\| center \\| bottom` | y-position\n\n### INotyfNotificationOptions\n\nConfiguration interface for each individual toast.\n\nParam | Type  | Details\n------------ | ------------- | -------------\ntype | `string` | Notification type for which this configuration will be applied\nclassName | `string` | Custom class name to be set in the toast wrapper element\nduration | `number` | 2000 | Number of miliseconds before hiding the notification\nicon | `string` [`INotyfIcon`](#inotyficon) `false` | Either a string with HTML markup, an object with the properties of the icon, or 'false' to hide the icon\nbackground | `string` | Background color of the toast\nmessage | `string` | Message to be rendered inside of the toast. Becomes the default message when used in the global config.\nripple | `boolean` | Whether or not to render the ripple at revealing\ndismissible | `boolean` | Whether to allow users to dismiss the notification with a button\n\n### INotyfIcon\n\nIcon configuration\n\nParam | Type | Details\n------------ | ------------- | -------------\nclassName | `string` | Custom class name to be set in the icon element\ntagName | `string` | HTML5 tag used to render the icon\ntext | `string` | Inner text rendered within the icon (useful when using [ligature icons](https://css-tricks.com/ligature-icons/))\ncolor | `string` | Icon color. It must be a valid CSS color value. Defaults to background color.\n\n## Examples\n\n### Global configuration\n\nThe following example configures Notyf with the following settings:\n- 1s duration\n- Render notifications in the top-right corner\n- New custom notification called 'warning' with a [ligature material icon](https://google.github.io/material-design-icons/)\n- Error notification with custom duration, color and dismiss button\n\n```javascript\nconst notyf = new Notyf({\n  duration: 1000,\n  position: {\n    x: 'right',\n    y: 'top',\n  },\n  types: [\n    {\n      type: 'warning',\n      background: 'orange',\n      icon: {\n        className: 'material-icons',\n        tagName: 'i',\n        text: 'warning'\n      }\n    },\n    {\n      type: 'error',\n      background: 'indianred',\n      duration: 2000,\n      dismissible: true\n    }\n  ]\n});\n```\n\n### Custom toast type\n\nRegister a new toast type and use it by referencing its type name:\n\n```javascript\nconst notyf = new Notyf({\n  types: [\n    {\n      type: 'info',\n      background: 'blue',\n      icon: false\n    }\n  ]\n});\n\nnotyf.open({\n  type: 'info',\n  message: 'Send us \u003cb\u003ean email\u003c/b\u003e to get support'\n});\n```\n\n**Warning:** Notyf doesn't sanitize the content when rendering your message. To avoid [injection attacks](https://github.com/caroso1222/notyf/issues/72), you should either sanitize your HTML messages or make sure you don't render user generated content on the notifications.\n\n### Default types with custom configurations\n\nThe default types are 'success' and 'error'. You can use them simply by passing a message as its argument, or you can pass a settings object in case you want to modify its behaviour.\n\n```javascript\nconst notyf = new Notyf();\n\nnotyf.error({\n  message: 'Accept the terms before moving forward',\n  duration: 9000,\n  icon: false\n})\n```\n\n## Recipes\n\nNotyf is well supported in all of the modern frameworks such as Angular, React, Aurelia, Vue, or Svelte. [Check out the recipes](recipes/README.md) and learn how to integrate the library to your application.\n\n## Contributing\n\nPlease see the [contributing](CONTRIBUTING.md) document and read the contribution guidelines. Thanks in advance for all the help!\n\n## Licence\n\nNotyf is under [MIT licence](https://opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaroso1222%2Fnotyf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaroso1222%2Fnotyf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaroso1222%2Fnotyf/lists"}