@retrocib/notiflix-extended

Unofficial fork of Notiflix (based on version 3.2.8), published separately on npm. Not affiliated with the original author or the official project. Licensed under MIT, same as the original.

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 — colors of already-displayed components update live when the theme changes, with no re-render.

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!');

Being a real package under node_modules (unlike local UMD files), 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 (dist/notiflix-notify-aio-*.min.js etc., structured identically to the official notiflix package) 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)
• Development (local build / Docker)
• Publishing to npm
• Differences from official Notiflix
• 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.

Development (local build / Docker)

The source lives in src/notiflix.js (+ src/notiflix.css); build/ and dist/ are generated, not edited by hand.

Without Node installed locally, use Docker Compose (see docker-compose.yml at the root of this package):

docker compose run --rm build      # installs dependencies, lints, generates build/ and dist/
docker compose run --rm test       # unit tests (test/_helpers, jsdom, no browser)
docker compose run --rm test-e2e   # e2e tests (test/e2e, Puppeteer + real Chromium)

With Node/Yarn installed locally:

yarn install
yarn notiflix:build      # generates build/*-aio.js from src/notiflix.js
yarn notiflix:minifier   # generates dist/*.min.js + .min.css (requires bumping the version in package.json versus the files already in dist/)

The test/e2e/ suite (the original config was hardcoded to the original author's machine — a macOS Chrome path, an absolute file path) has been made portable: test/_config/config.ts computes the repo path dynamically (pathToFileURL + path.resolve, works on any OS) and reads the browser executable from the PUPPETEER_EXECUTABLE_PATH environment variable (set automatically in Dockerfile.e2e, which installs Chromium). The tests now run against the real docs/css/index.html example (there is no more dedicated test-e2e-notify.html page) — the Notify buttons there received data-pptr-selector attributes used by Puppeteer for precise targeting.

Publishing to npm

Without Node/npm installed locally, use the publish service from docker-compose.yml — it gives you an interactive shell, with the whole package mounted, where you run the real npm commands yourself (login and publish are irreversible external actions, so they are not automated into a single command:):

docker compose run --rm publish

You're now in an sh shell in the Node 20 + npm container, in the package directory. From here:

1. Authenticate (once; saves a token to ~/.npmrc inside the container, which does not persist between runs unless you also mount ~/.npmrc — see the note below):

   npm login

   Opens npm's web login flow: it prints a URL you open manually in any browser (on any machine), you confirm there, and the command in the container continues automatically once confirmed. If you have 2FA enabled for publishing, the OTP code is also prompted for here, interactively.

2. Verify the session:

   npm whoami

3. Preview what would be published (no effect, doesn't require authentication):

   npm publish --dry-run

   Check the tarball's file list (it should be exactly index.d.ts, build/, dist/, src/, package.json, README.md, LICENSE — per the "files" field in package.json; docs/ never appears, it's not listed there).

4. Publish for real (irreversible — a published version can never be re-uploaded with different content under the same number; it can only be deprecated, or, within the first 72h, unpublished):

   npm publish

If you'd rather not repeat npm login every time, generate an Automation/Granular Access Token from your npm account, then in the container's shell: npm config set //registry.npmjs.org/:_authToken <TOKEN> before npm publish. Don't put the token in package.json or any committed file.

For any later version: bump "version" in package.json (npm refuses to republish the same version), run docker compose run --rm build to regenerate build/+dist/, then repeat steps 3-4 above.

Differences from official Notiflix

| | Official Notiflix | This fork | |---|---|---| | npm package | notiflix | @retrocib/notiflix-extended | | Callback API (Notify/Report/Confirm/Loading/Block) | ✅ | ✅ identical | | Promise API (*Async) | ❌ | ✅ | | Reactive CSS theming | ❌ (fixed hex colors) | ✅ (DaisyUI / Tailwind / plain CSS) | | Official maintenance/support | github.com/notiflix/Notiflix | this repo, unofficial |

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.