@retrocib/notiflix-extended

@retrocib/notiflix-extended

Unofficial fork of Notiflix (based on version 3.2.8). Not affiliated with the original author or the official project. Licensed under MIT, same as the original. Full source, development, and publishing instructions: GitHub repository.

Notiflix is a dependency-free JavaScript library for toast notifications, confirmation dialogs, loading indicators, and blocking UI elements. This fork keeps 100% of the original API and behavior, and adds:

1. Promise-based (async/await) API for Confirm and Report — showAsync, askAsync, promptAsync, successAsync, failureAsync, warningAsync, infoAsync.
2. Live/reactive CSS-variable theming, compatible with DaisyUI v5 / Tailwind / plain CSS, through a 3-tier fallback chain.

---

Installation

npm install @retrocib/notiflix-extended
# or
yarn add @retrocib/notiflix-extended

import Notiflix from '@retrocib/notiflix-extended';
import '@retrocib/notiflix-extended/dist/notiflix-3.2.8-extended.2.min.css';

Notiflix.Notify.success('Done!');

import Notiflix from '@retrocib/notiflix-extended' works directly in Vite, webpack, Rollup, Next.js, etc. — bundlers automatically handle CommonJS/UMD interop for node_modules dependencies.

If you only want one module (not the whole package), the per-module builds are meant for direct <script> inclusion, not import — they attach/extend window.Notiflix with that module:

<script src="node_modules/@retrocib/notiflix-extended/dist/notiflix-notify-aio-3.2.8-extended.2.min.js"></script>
<script>Notiflix.Notify.success('Hi!');</script>

For usage with import, the recommended approach is the full package (above), then destructure what you need: const { Notify } = Notiflix;.

No CDN/framework: include the files from dist/ directly with <script>/<link>.

---

Table of contents

• Notify
• Report
• Confirm
• Loading
• Block
• Promise-based API (Async)
• Reactive theming (DaisyUI / Tailwind / plain CSS)
• License

---

Notify

Toast-style notifications, positionable, auto-dismissing.

Notiflix.Notify.init({ /* global options, optional */ });
Notiflix.Notify.success('Saved successfully!');
Notiflix.Notify.failure('An error occurred.');
Notiflix.Notify.info('Click here!', function () { alert('Thanks!'); });

Method	Signature
init	Notify.init(options)
merge	Notify.merge(options)
success / failure / warning / info	Notify.<type>(message, callbackOrOptions, options)

Main options: width, position (right-top by default, 7 variants), distance, timeout (3000ms), backOverlay, plainText, showOnlyTheLastOne, clickToClose, pauseOnHover, closeButton, useIcon, useFontAwesome, cssAnimationStyle (fade by default, 6 variants) — plus per-type settings (success/failure/warning/info): background, textColor.

---

Report

Centered modal with an animated icon, title, message, and one button.

Notiflix.Report.success('Congratulations', 'The operation succeeded.', 'OK');
Notiflix.Report.failure('Error', 'Something went wrong.', 'Got it', function () {
  console.log('Closed.');
});

Method	Signature
init / merge	Report.init(options) / Report.merge(options)
success / failure / warning / info	Report.<type>(title, message, buttonText, callbackOrOptions, options)

---

Confirm

Confirmation dialog: show (Yes/No), ask (exact-answer validation), prompt (free text input).

Notiflix.Confirm.show('Confirm', 'Are you sure?', 'Yes', 'No', function () {
  console.log('OK');
}, function () {
  console.log('Cancel');
});

Method	Signature
init / merge	Confirm.init(options) / Confirm.merge(options)
show	Confirm.show(title, message, okButtonText, cancelButtonText, okButtonCallback, cancelButtonCallback, options)
ask	Confirm.ask(title, question, answer, okButtonText, cancelButtonText, okButtonCallback, cancelButtonCallback, options)
prompt	Confirm.prompt(title, question, defaultAnswer, okButtonText, cancelButtonText, okButtonCallback, cancelButtonCallback, options)

The Cancel button only appears if okButtonCallback is a function.

---

Loading

Full-screen overlay with a spinner.

Notiflix.Loading.standard('Loading...');
Notiflix.Loading.change('Almost done...');
Notiflix.Loading.remove();

Method	Signature
init / merge	Loading.init(options) / Loading.merge(options)
standard / hourglass / circle / arrows / dots / pulse / notiflix	Loading.<type>(messageOrOptions, options)
custom	Loading.custom(messageOrOptions, options) — requires customSvgUrl or customSvgCode
remove	Loading.remove(delay)
change	Loading.change(newMessage)

---

Block

Overlays a loading indicator on top of specific elements in the page.

Notiflix.Block.standard('.form-card', 'Submitting...');
Notiflix.Block.remove('.form-card');

Method	Signature
init / merge	Block.init(options) / Block.merge(options)
standard / hourglass / circle / arrows / dots / pulse	Block.<type>(selectorOrHTMLElements, messageOrOptions, options)
remove	Block.remove(selectorOrHTMLElements, delay)

selectorOrHTMLElements accepts a CSS selector, an Array<HTMLElement>, or a NodeListOf<HTMLElement>.

---

Promise-based API (Async)

Not present in official Notiflix — added by this fork. These are Promise equivalents of the existing callback-based methods; they don't replace them.

Confirm

Method	Resolves with	Rejects
showAsync(title, message, okButtonText, cancelButtonText, options)	—	Error on Cancel
askAsync(title, question, answer, okButtonText, cancelButtonText, options)	answer (after the correct answer + OK)	Error on Cancel
promptAsync(title, question, defaultAnswer, okButtonText, cancelButtonText, options)	the entered value	Error on Cancel

async function confirmDelete() {
  try {
    await Notiflix.Confirm.showAsync('Delete', 'Are you sure you want to delete this item?', 'Yes', 'No');
    Notiflix.Notify.success('Deleted successfully.');
  } catch {
    Notiflix.Notify.info('Cancelled.');
  }
}

Report

Method	Resolves
successAsync / failureAsync / warningAsync / infoAsync(title, message, buttonText, options)	when the user clicks the button

await Notiflix.Report.successAsync('Done', 'Operation completed.', 'Got it');

---

Reactive theming (DaisyUI / Tailwind / plain CSS)

Not present in official Notiflix — added by this fork. Every themeable color uses a 3-tier CSS fallback chain:

var(--color-success, var(--nx-success, #32c682))
     └─ 1) DaisyUI v5      └─ 2) Notiflix's own      └─ 3) original
        (if present)          variable (set by you)      hardcoded value

Since these are live CSS variables, any component already on screen changes its color automatically the moment the relevant variable changes (e.g. when DaisyUI's [data-theme] is switched) — no re-render needed.

• You have DaisyUI v5 → nothing to do, --color-success, --color-primary, --color-base-100 etc. are already defined.
• You only have Tailwind (or any other design system) → define the --nx-* variables yourself, e.g. in an @theme block:

  @theme {
    --nx-success: #16a34a;
    --nx-primary: #4f46e5;
    --nx-base-100: #ffffff;
    --nx-base-content: #1e293b;
  }

• No framework at all → the original hardcoded colors, identical behavior to unmodified Notiflix.

Recognized variables: --nx-success, --nx-error, --nx-warning, --nx-info, --nx-primary, --nx-neutral (each + -content), --nx-base-100, --nx-base-content. Explicit options passed to init({...}) always take priority.

---

License

MIT — 2019-2025 Notiflix (Furkan, github.com/furcan) for the original code. The extensions in this fork (*Async, CSS theming) are distributed under the same MIT license.