### Install Project Dependencies

Source: https://github.com/caroso1222/notyf/blob/master/CONTRIBUTING.md

Install all necessary dependencies for the project. This is a required step before running the development server or building the project.

```bash
npm i
```

--------------------------------

### Install Notyf via npm

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Use npm to install the Notyf library. This is the first step before integrating it into your project.

```bash
npm i notyf
```

--------------------------------

### Run Development Server

Source: https://github.com/caroso1222/notyf/blob/master/CONTRIBUTING.md

Start the development server to test changes locally. This command is used during the development process to preview changes in the browser.

```bash
npm run dev
```

--------------------------------

### Install Rollup CSS Plugin

Source: https://github.com/caroso1222/notyf/blob/master/recipes/svelte.md

Install the `rollup-plugin-css-only` package to process CSS files during the build.

```bash
npm i rollup-plugin-css-only
```

--------------------------------

### Use Global Notyf Instance in JavaScript

Source: https://github.com/caroso1222/notyf/blob/master/recipes/global.md

Access the globally initialized Notyf instance to display notifications from your custom scripts. This example shows how to trigger an error notification on a button click.

```javascript
document.getElementById('send-button')
  .addEventListener('click', function() {
    notyf.error('Please fill out all the fields in the form');
  });
```

--------------------------------

### Use Notyf with Context Consumer (Class Components)

Source: https://github.com/caroso1222/notyf/blob/master/recipes/react.md

Example of using the Notyf context in a class component via the Context.Consumer. This method is suitable for older React versions before Hooks were introduced.

```jsx
// For React < 16.8 (No Hooks)
import React from 'react'
import NotyfContext from './path/to/NotyfContext';

export function Card() {
  return (
    <NotyfContext.Consumer>
      {notyf => (
        <div>
          <button onClick={() => notyf.error('Please fill out all the fields in the form')}>Send</button>
        </div>
      )}
    </NotyfContext.Consumer>
  );
}

export default Card;
```

--------------------------------

### Use Notyf with Context Consumer (React Hooks)

Source: https://github.com/caroso1222/notyf/blob/master/recipes/react.md

Example of using the Notyf context in a functional component with React Hooks. This allows easy access to the Notyf instance for displaying notifications.

```jsx
// For React >= 16.8 (Hooks)
import React, { useContext } from 'react'
import NotyfContext from './path/to/NotyfContext';


export function Card() {
  const notyf = useContext(NotyfContext);
  
  return (
    <div>
      <button onClick={() => notyf.error('Please fill out all the fields in the form')}>Send</button>
    </div>
  );
}
```

--------------------------------

### Dismiss a Specific Notification

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Example of how to dismiss a single notification programmatically after it has been displayed. Requires storing the notification object.

```javascript
const notyf = new Notyf();
const notification = notyf.success('Address updated');
notyf.dismiss(notification);
```

--------------------------------

### Trigger Notyf Notification in Vue Component

Source: https://github.com/caroso1222/notyf/blob/master/recipes/nuxt.md

Call the Notyf success notification method from a Vue component's method after it has been added to the Vue prototype. This example shows triggering a notification on a click event.

```html
<template>
  <div @click="onClick" class="button--green">Notyf</div>
</template>

<script>
export default {
  methods: {
    onClick() {
       this.$notyf.success("All you need is Love");
    }
  }
}
</script>

```

--------------------------------

### Create Notyf Singleton

Source: https://github.com/caroso1222/notyf/blob/master/recipes/svelte.md

Create a `notyf.js` file to initialize Notyf with your desired configuration and export it as a singleton.

```javascript
import { Notyf } from 'notyf';
import 'notyf/notyf.min.css';

export const notyf = new Notyf({
  duration: 5000,
  dismissible: true,
});
```

--------------------------------

### Basic Notyf Usage

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Demonstrates how to create a Notyf instance and display basic error and success notifications.

```javascript
// Create an instance of Notyf
var notyf = new Notyf();

// Display an error notification
notyf.error('You must fill out the form before moving forward');

// Display a success notification
notyf.success('Your changes have been successfully saved!');
```

--------------------------------

### Build Project

Source: https://github.com/caroso1222/notyf/blob/master/CONTRIBUTING.md

Compile and minify the project code. This command generates a new bundle and is used after making changes to the source code.

```bash
npm run build
```

--------------------------------

### Provide Global Notyf Instance in main.js

Source: https://github.com/caroso1222/notyf/blob/master/recipes/vue.md

Import Notyf and its CSS, then create a global instance within the Vue constructor's provide option. Configure Notyf options here.

```javascript
import Vue from 'vue'
import App from './App.vue'
import { Notyf } from 'notyf';
import 'notyf/notyf.min.css';

Vue.config.productionTip = false

new Vue({
  provide: () => {
    return {
      notyf: new Notyf({
        duration: 5000 // Set your global Notyf configuration here
      })
    }
  },
  render: h => h(App),
}).$mount('#app')
```

--------------------------------

### Global Configuration

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Demonstrates how to configure Notyf globally with custom durations, positions, and notification types. It also shows how to define custom types with specific backgrounds, icons, and dismissibility.

```APIDOC
## Global Configuration

### Description
Configures Notyf with custom durations, positions, and notification types. Allows defining new notification types with specific styles and behaviors.

### Method
Constructor

### Parameters
#### Options
- **duration** (number) - Optional - Default: 2000 - Number of milliseconds before hiding the notification.
- **position** (object) - Optional - Specifies the viewport location for notifications.
  - **x** (string) - Required - Viewport horizontal position: 'left', 'center', or 'right'.
  - **y** (string) - Required - Viewport vertical position: 'top', 'center', or 'bottom'.
- **types** (array) - Optional - An array of custom notification type configurations.
  - Each object in the array can have:
    - **type** (string) - Required - The name of the notification type.
    - **background** (string) - Optional - Background color of the toast.
    - **icon** (string | object | false) - Optional - Icon configuration. Can be HTML markup, an icon object, or false to hide.
    - **duration** (number) - Optional - Overrides global duration for this type.
    - **dismissible** (boolean) - Optional - Whether to allow users to dismiss the notification with a button.

### Request Example
```javascript
const notyf = new Notyf({
  duration: 1000,
  position: {
    x: 'right',
    y: 'top',
  },
  types: [
    {
      type: 'warning',
      background: 'orange',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    },
    {
      type: 'error',
      background: 'indianred',
      duration: 2000,
      dismissible: true
    }
  ]
});
```
```

--------------------------------

### Configure Notyf with Global Settings

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Initialize Notyf with global settings for duration, position, and custom notification types like 'warning' and 'error'. The 'warning' type uses a material icon, while 'error' is dismissible with a custom duration.

```javascript
const notyf = new Notyf({
  duration: 1000,
  position: {
    x: 'right',
    y: 'top',
  },
  types: [
    {
      type: 'warning',
      background: 'orange',
      icon: {
        className: 'material-icons',
        tagName: 'i',
        text: 'warning'
      }
    },
    {
      type: 'error',
      background: 'indianred',
      duration: 2000,
      dismissible: true
    }
  ]
});
```

--------------------------------

### Registering and Using Custom Toast Types

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Shows how to register a new custom toast type and then use it to display notifications with specific styling and no icon.

```APIDOC
## Custom Toast Type

### Description
Registers a new toast type and allows its usage by referencing its type name. Example shows an 'info' type with a blue background and no icon.

### Method
`notyf.open(options)`

### Parameters
#### Options
- **type** (string) - Required - The type of the notification to open (e.g., 'info', 'success', 'error').
- **message** (string) - Required - The message to display in the notification. Supports HTML.

### Request Example
```javascript
const notyf = new Notyf({
  types: [
    {
      type: 'info',
      background: 'blue',
      icon: false
    }
  ]
});

notyf.open({
  type: 'info',
  message: 'Send us <b>an email</b> to get support'
});
```

### Warning
Notyf does not sanitize message content. Ensure user-generated content is sanitized to prevent injection attacks.
```

--------------------------------

### Configure Notyf Plugin for Nuxt

Source: https://github.com/caroso1222/notyf/blob/master/recipes/nuxt.md

Set up the Notyf plugin in Nuxt by creating a JavaScript file in the plugins directory and defining the Notyf instance. This makes the Notyf instance available globally.

```javascript
import { Notyf } from "notyf";
import Vue from "vue";

const notyf = new Notyf();

Object.defineProperty(Vue.prototype, "$notyf", { value: notyf });

```

--------------------------------

### Basic Usage

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Demonstrates the basic usage of Notyf for displaying error and success notifications.

```APIDOC
## Basic Usage

```javascript
// Create an instance of Notyf
var notyf = new Notyf();

// Display an error notification
notyf.error('You must fill out the form before moving forward');

// Display a success notification
notyf.success('Your changes have been successfully saved!');
```
```

--------------------------------

### Run Development Tests

Source: https://github.com/caroso1222/notyf/blob/master/CONTRIBUTING.md

Execute the development test suite. This command is used to ensure all tests are passing before submitting a pull request.

```bash
npm run test:dev
```

--------------------------------

### Usage with Module Bundlers

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Shows how to import and use Notyf with module bundlers like Webpack, including CSS import.

```APIDOC
## With module bundlers

```javascript
import { Notyf } from 'notyf';
import 'notyf/notyf.min.css'; // for React, Vue and Svelte

// Create an instance of Notyf
const notyf = new Notyf();

// Display an error notification 
notyf.error('Please fill out the form');
```
```

--------------------------------

### Create NotyfContext.js

Source: https://github.com/caroso1222/notyf/blob/master/recipes/react.md

Create a React Context to hold the Notyf instance, allowing it to be shared across the component tree. Configure global Notyf settings here.

```javascript
import React  from 'react'
import { Notyf } from 'notyf';

export default React.createContext(
  new Notyf({
    duration: 5000 // Set your global Notyf configuration here
  })
);
```

--------------------------------

### Notyf Constructor

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Details the constructor for creating a Notyf instance with customizable options.

```APIDOC
## `new Notyf(options: INotyfOptions)`

You can set some options when creating a Notyf instance.

Param | Type | Default | Details
------------ | ------------- | ------------- | -------------
duration | `number` | 2000 | Number of miliseconds before hiding the notification. Use `0` for infinite duration.
ripple | `boolean` | true | Whether to show the notification with a ripple effect
position | [`INotyfPosition`](#inotyfposition) | `{x:'right',y:'bottom'}` | Viewport location where notifications are rendered
dismissible | `boolean` | false | Whether to allow users to dismiss the notification with a button
types | [`INotyfNotificationOptions[]`](#inotyfnotificationoptions) | Success and error toasts | Array with individual configurations for each type of toast
```

--------------------------------

### Register and Use Custom Toast Type

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Define a new 'info' toast type with a blue background and no icon. This custom type can then be opened using notyf.open() with the specified type and message. Be cautious about sanitizing message content to prevent injection attacks.

```javascript
const notyf = new Notyf({
  types: [
    {
      type: 'info',
      background: 'blue',
      icon: false
    }
  ]
});

notyf.open({
  type: 'info',
  message: 'Send us <b>an email</b> to get support'
});
```

--------------------------------

### Link Vendor CSS in HTML

Source: https://github.com/caroso1222/notyf/blob/master/recipes/svelte.md

Add the generated `vendor.css` file to your `index.html` to include Notyf's styles.

```diff
<html lang="en">
<head>
  ...
+ <link rel='stylesheet' href='/build/vendor.css'>
  ...
  <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>
```

--------------------------------

### Displaying Default Types with Custom Configurations

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Illustrates how to use the default 'error' notification type with custom configurations, including a specific message, duration, and disabling the icon.

```APIDOC
## Default Types with Custom Configurations

### Description
Allows modification of the default 'success' and 'error' notification types. This example shows customizing an 'error' notification with a specific message, duration, and no icon.

### Method
`notyf.error(options)` or `notyf.success(options)`

### Parameters
#### Options
- **message** (string) - Required - The message to display.
- **duration** (number) - Optional - Number of milliseconds before hiding the notification.
- **icon** (string | object | false) - Optional - Icon configuration. Set to `false` to hide the icon.

### Request Example
```javascript
const notyf = new Notyf();

notyf.error({
  message: 'Accept the terms before moving forward',
  duration: 9000,
  icon: false
});
```
```

--------------------------------

### Notyf Usage with Module Bundlers

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Shows how to import Notyf and its CSS when using module bundlers like Webpack. This is suitable for modern JavaScript frameworks.

```javascript
import { Notyf } from 'notyf';
import 'notyf/notyf.min.css'; // for React, Vue and Svelte

// Create an instance of Notyf
const notyf = new Notyf();

// Display an error notification 
notyf.error('Please fill out the form');
```

--------------------------------

### Import Notyf Stylesheet in App.js

Source: https://github.com/caroso1222/notyf/blob/master/recipes/react.md

Import the minified Notyf stylesheet in your main App.js file to enable styling for notifications.

```javascript
import React, { Component } from 'react';
import './App.css';
import 'notyf/notyf.min.css';

class App extends Component { ... }
```

--------------------------------

### Create Notyf Injection Token and Factory

Source: https://github.com/caroso1222/notyf/blob/master/recipes/angular.md

Define an injection token and a factory function to create and configure Notyf instances. This allows for centralized configuration.

```typescript
import { InjectionToken } from '@angular/core';
import { Notyf } from 'notyf';

export const NOTYF = new InjectionToken<Notyf>('NotyfToken');

export function notyfFactory(): Notyf {
  return new Notyf({
    duration: 5000 // Set your global Notyf configuration here
  });
}
```

--------------------------------

### Event: 'click'

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Listens for click events on individual notifications.

```APIDOC
## Event: 'click'

Triggers when the notification is clicked

```javascript
const notyf = new Notyf();
const notification = notyf.success('Address updated. Click here to continue');
notification.on('click', ({target, event}) => {
  // target: the notification being clicked
  // event: the mouseevent
  window.location.href = '/';
});
```
```

--------------------------------

### Nuxt Configuration for Notyf

Source: https://github.com/caroso1222/notyf/blob/master/recipes/nuxt.md

Import the Notyf stylesheet and the custom plugin in your nuxt.config.js file. Ensure the plugin is configured for client-side rendering only.

```javascript
export default {
...css: ["notyf/notyf.min.css"],
...
plugins: [{ src: "~/plugins/notyf.js", ssr: false }],
}
...
```

--------------------------------

### Event: 'dismiss'

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Listens for manual dismiss events on notifications.

```APIDOC
## Event: 'dismiss'

Triggers when the notification is **manually** (not programatically) dismissed.

```javascript
const notyf = new Notyf();
notyf
  .error({
    message: 'There has been an error. Dismiss to retry.',
    dismissible: true
  })
  .on('dismiss', ({target, event}) => foobar.retry());
```
```

--------------------------------

### Dismiss All Notifications

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Demonstrates how to dismiss all currently active notifications using the `dismissAll` method.

```javascript
const notyf = new Notyf();
notyf.success('Address updated');
notyf.error('Please fill out the form');
notyf.dismissAll();
```

--------------------------------

### Single Use Notyf Instance in Aurelia Component

Source: https://github.com/caroso1222/notyf/blob/master/recipes/aurelia.md

Create and configure a new Notyf instance directly within an Aurelia component for localized or specific notification needs.

```javascript
import {Notyf} from 'notyf';
export class Test
{
  notifyStuff()
  {
    const notyf = new Notyf(); // configure at will
    notyf.success("Hello World!!!");
  }
}
```

--------------------------------

### Include Notyf CSS and JS in HTML

Source: https://github.com/caroso1222/notyf/blob/master/recipes/global.md

Add the Notyf stylesheet in the head and the script tag before the closing body tag. Ensure custom scripts are imported after Notyf.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <link href="path/to/notyf.min.css" rel="stylesheet">
    </head>
    <body>
        <button id="send-button">Send</button>
        ...
        <script src="path/to/notyf.min.js" type="application/javascript"></script>
        <script type="application/javascript">
          var notyf = new Notyf({
            duration: 5000 // Set your global Notyf configuration here
          });
        </script>
        <script src="scripts/your-custom-script.js" type="application/javascript"></script>
    </body>
</html>
```

--------------------------------

### Importing Notyf Stylesheet in Aurelia

Source: https://github.com/caroso1222/notyf/blob/master/recipes/aurelia.md

Import the Notyf minified stylesheet in main.ts/js when using Notyf in an Aurelia application.

```javascript
import 'notyf/notyf.min.css';
```

--------------------------------

### Include Notyf CSS and JS in HTML

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Add the Notyf CSS and JavaScript files to your main HTML document. These files are available via CDN.

```html
<html>
  <head>
    ...
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
  </head>
  <body>
    ...
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
  </body>
</html>
```

--------------------------------

### Configure Rollup for CSS Output

Source: https://github.com/caroso1222/notyf/blob/master/recipes/svelte.md

Configure `rollup-plugin-css-only` in `rollup.config.js` to output imported CSS into a `vendor.css` file.

```diff
+ import css from 'rollup-plugin-css-only';

export default {
  input: 'src/main.js',
  output: { ... },
  plugins: [
+   css({ output: 'public/build/vendor.css' }),
    svelte({
      ...
    }),
    ...
};
```

--------------------------------

### Handle Notification Click Event

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Register a click listener on a notification to perform an action, such as redirecting the user, when the notification is clicked.

```javascript
const notyf = new Notyf();
const notification = notyf.success('Address updated. Click here to continue');
notification.on('click', ({target, event}) => {
  // target: the notification being clicked
  // event: the mouseevent
  window.location.href = '/';
});
```

--------------------------------

### Configure Angular.json for Notyf Stylesheet

Source: https://github.com/caroso1222/notyf/blob/master/recipes/angular.md

Add the Notyf minified stylesheet to your Angular project's build options. This ensures the notification styles are included.

```json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "hello-world": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "./node_modules/notyf/notyf.min.css"
            ],
            "scripts": []
          }

```

--------------------------------

### Global Notyf Configuration in Aurelia

Source: https://github.com/caroso1222/notyf/blob/master/recipes/aurelia.md

Configure Notyf once globally in main.ts/js for dependency injection. This allows lazy injection of the Notyf instance into components.

```javascript
import { Notyf } from 'notyf';
import 'notyf/notyf.min.css';

... 
... 
... 

// using registerSingleton with lambda to allow lazy injection
aurelia.container.registerSingleton(Notyf,
  () => new Notyf({
    duration: 5000 // Set your global Notyf configuration here
  })
);

aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
```

--------------------------------

### Use Notyf in Svelte Component

Source: https://github.com/caroso1222/notyf/blob/master/recipes/svelte.md

Import the Notyf singleton into your Svelte component and use its methods to display notifications.

```svelte
<script>
  import { notyf } from './notyf';

  function success() {
    notyf.success('It works!')
  }
</script>

<main>
  <button on:click={success}> Success </button>
</main>
```

--------------------------------

### Configure Default Error Notification

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Display a default 'error' notification with a custom message, extended duration, and no icon. This demonstrates overriding default settings for a specific notification instance.

```javascript
const notyf = new Notyf();

notyf.error({
  message: 'Accept the terms before moving forward',
  duration: 9000,
  icon: false
})
```

--------------------------------

### Component Usage with Lazy Notyf Injection

Source: https://github.com/caroso1222/notyf/blob/master/recipes/aurelia.md

Inject the globally configured Notyf instance into an Aurelia component using the @lazy decorator. Use the injected instance via a getter function.

```javascript
import {autoinject} from 'aurelia-framework';
import {lazy} from 'aurelia-framework';
import {Notyf} from 'notyf';

@autoinject()
export class Test
{
  constructor(@lazy(Notyf) private getNotyf: () => Notyf) {}

  notifyStuff()
  {
    this.getNotyf().success("Hello World!!!");
  }
}
```

--------------------------------

### Handle Notification Dismiss Event

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Attach an event listener to a notification to execute a function when the notification is manually dismissed by the user. This is useful for retry mechanisms.

```javascript
const notyf = new Notyf();
notyf
  .error({
    message: 'There has been an error. Dismiss to retry.',
    dismissible: true
  })
  .on('dismiss', ({target, event}) => foobar.retry());
```

--------------------------------

### dismissAll()

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Dismisses all currently active notifications.

```APIDOC
## `dismissAll()`

Dismiss all the active notifications.

```javascript
const notyf = new Notyf();
notyf.success('Address updated');
notyf.error('Please fill out the form');
notyf.dismissAll();
```
```

--------------------------------

### Inject and Use Notyf in Vue Component

Source: https://github.com/caroso1222/notyf/blob/master/recipes/vue.md

Inject the global Notyf instance into your component and use it to display notifications, such as error messages.

```html
<template>
  <button v-on:click="onClick">Send</button>
</template>
```

```javascript
<script>
export default {
  inject: ['notyf'],
  methods: {
    onClick: function() {
      this.notyf.error('Please fill out all the fields in the form');
    }
  }
}
</script>
```

--------------------------------

### dismiss(notification: NotyfNotification)

Source: https://github.com/caroso1222/notyf/blob/master/README.md

Dismisses a specific notification programmatically.

```APIDOC
## `dismiss(notification: NotyfNotification)`

Dismiss a specific notification.

```javascript
const notyf = new Notyf();
const notification = notyf.success('Address updated');
notyf.dismiss(notification);
```
```

--------------------------------

### Inject and Use Notyf in Angular Component

Source: https://github.com/caroso1222/notyf/blob/master/recipes/angular.md

Inject the Notyf dependency into an Angular component's constructor using the previously defined token. You can then use Notyf methods to display notifications.

```typescript
import { Inject } from '@angular/core';
import { NOTYF } from './path/to/notyf.token';
import { Notyf } from 'notyf';

constructor(@Inject(NOTYF) private notyf: Notyf) { }

alert() {
  this.notyf.error('Please fill out all the fields in the form');
}
```

--------------------------------

### Provide Notyf Token in AppModule

Source: https://github.com/caroso1222/notyf/blob/master/recipes/angular.md

Register the Notyf injection token and its factory in your Angular application's root module. This makes Notyf available for dependency injection throughout the app.

```typescript
import { NOTYF, notyfFactory } from './path/to/notyf.token';

@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  providers: [
    { provide: NOTYF, useFactory: notyfFactory }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.