Как использовать закусочную панель Notistack вне компонентов react

Notistack — отличный инструмент для работы с уведомлениями. Иногда мы создаем отдельный js-файл для вызова api. Но обычно он недоступен вне компонентов react.

Сегодня мы решим эту проблему. Для этого нам нужно выполнить несколько шагов.

Я показываю это на примере NextJS

JavaScript

import { useSnackbar } from 'notistack';

let useSnackbarRef;
export const SnackbarUtilsConfigurator = () => {
  useSnackbarRef = useSnackbar();
  return null;
};

export default {
  success(msg) {
    this.toast(msg, 'success');
  },
  warning(msg) {
    this.toast(msg, 'warning');
  },
  info(msg) {
    this.toast(msg, 'info');
  },
  error(msg) {
    this.toast(msg, 'error');
  },
  toast(msg, variant = 'default') {
    useSnackbarRef.enqueueSnackbar(msg, { variant,    autoHideDuration: 1500 });
  },
};

Войдите в полноэкранный режим Выйти из полноэкранного режима

TypeScript

import { useSnackbar, VariantType, WithSnackbarProps } from 'notistack'

let useSnackbarRef: WithSnackbarProps
export const SnackbarUtilsConfigurator: React.FC = () => {
  useSnackbarRef = useSnackbar()
  return null
}

export default {
  success(msg: string) {
    this.toast(msg, 'success')
  },
  warning(msg: string) {
    this.toast(msg, 'warning')
  },
  info(msg: string) {
    this.toast(msg, 'info')
  },
  error(msg: string) {
    this.toast(msg, 'error')
  },
  toast(msg: string, variant: VariantType = 'default') {
    useSnackbarRef.enqueueSnackbar(msg, { variant })
  }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Импортируйте SnackbarProvider из notistack
Импортируйте функцию SnackbarUtilsConfigurator в _app.js.

Пример

Спасибо за чтение

Связь со мной : Github LinkedIn