Skip to content
  1. Extras
  2. FetchIt
  3. Notifications
  4. Notyf

Notyf

Another minimalistic notification library based on pure JavaScript that has many advantages. Let's plug in Notyf.

TIP

From version 1.1.0 and 3.1.0 a system setting fetchit.frontend.default.notifier is available, if enabled, which will display popup notifications Notyf.

  • First you need to connect the script and library styles, we'll use CDN as an example.
html
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js" defer></script>

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
  • Create an instance of the notification class and define the FetchIt.Message property as follows:
js
document.addEventListener('DOMContentLoaded', () => {
  const notyf = new Notyf();

  FetchIt.Message = {
    success(message) {
      notyf.success(message);
    },
    error(message) {
      notyf.error(message);
    },
  }
});
  • Or in your file script with the defer attribute, then you don't need to put a handler on the DOMContentLoaded event and get direct access to the FetchIt class:
js
const notyf = new Notyf();

FetchIt.Message = {
  success(message) {
    notyf.success(message);
  },
  error(message) {
    notyf.error(message);
  },
}

Voila! That's how easy it is to connect the Notyf library.