React Toastify: полное руководство.

Эта статья изначально была опубликована на React Toastify: полное руководство.

В этом руководстве мы начнем с основ создания всплывающих уведомлений и шаг за шагом перейдем к созданию сложных уведомлений и изучению всех возможностей библиотеки React Toastify.

Вот краткое изложение того, что мы собираемся узнать в этой статье.

Что такое всплывающие уведомления?
Что такое реакция Toastify?
Установка реакции Toastify
Создание основного всплывающего уведомления
Типы всплывающих сообщений
Настройка позиции всплывающего сообщения
Пользовательский стиль с помощью HTML и CSS всплывающих сообщений
Использование перехода и анимации
Тост-сообщения на основе обещаний
Обработка автозакрытия
Строка рендеринга, число и компонент
Установка пользовательских значков, использование встроенных значков и отключение значков
Приостановить тост, когда окно теряет фокус
Отложить тост-уведомление
Реализация контролируемого индикатора выполнения
Обновление всплывающего уведомления при возникновении события
Пользовательская кнопка закрытия или удалить кнопку закрытия
Переход к различным переходам
Определение пользовательской анимации входа и выхода
Перетащите, чтобы удалить

Если вы ищете JavaScript API и SDK для чата, DeadSimpleChat — это решение для вас.

Что такое всплывающие уведомления?

Уведомления Toast или Toastify — это всплывающие сообщения, которые обычно содержат некоторую информацию на боковой панели. Это может быть такая информация, как успех, загрузка, ошибка или предупреждение.

Там также может быть индикатор выполнения или нет. доступны различные всплывающие уведомления. Обратитесь к изображениям ниже для примера:

Что такое реагировать на тостирование?

React toastify — одна из самых популярных библиотек для создания всплывающих уведомлений в React.

С помощью react toastify вы можете легко создавать всплывающие уведомления и оповещения в своем реагирующем приложении.

Установка React Toastify

Чтобы установить React Toastify, сначала вам нужно приложение React. Вы можете легко добавить в свое реагирующее приложение или, если вы узнаете, вы можете создать новое реагирующее приложение с помощью create-react-app

Затем в вашем приложении для реагирования вы можете установить реакцию на toastify:

npm install --save react-toastify

с пряжей

yarn add react-toastify

Создание основного всплывающего уведомления

Создать базовое тост-уведомление очень просто. В вашем импорте файла App.Js реагируйте на тостирование и CSS-реагирование на тостирование, например:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

затем в вашей функции App() просто создайте уведомление

function App(){
	const notify = () => toast("This is a toast notification !");
	return (
	<div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    )
}

Теперь мы научились создавать базовые всплывающие уведомления. Давайте теперь узнаем о некоторых свойствах всплывающих уведомлений, характеристиках стилей и доступных типах всплывающих уведомлений.

Типы всплывающих уведомлений

В React toastify доступно 5 предопределенных типов всплывающих уведомлений.

это:

По умолчанию
Информация
успех
предупреждение
ошибка

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

Просто вызовите Toast Emitter с типом, который вы хотите реализовать

По умолчанию

const notify = () => toast("This is a toast notification !");

Это значение по умолчанию, поэтому здесь ничего вызывать не нужно. Полная функция выглядит так:

function Toastify(){
  const notify = () => toast.error("This is a toast notification !");
  return (
    <div>
    <button onClick={notify}>Notify !</button>
    <ToastContainer />
  </div>
  )

Информация

const notify = () => toast.info("This is a toast notification !");

Полная функция выглядит так

function Toastify(){
  const notify = () => toast.info("This is a toast notification !");
  return (
    <div>
    <button onClick={notify}>Notify !</button>
    <ToastContainer />
  </div>
  )
}

Успех

const notify = () => toast.success("This is a toast notification !");

полная функция выглядит

function Toastify(){
  const notify = () => toast.success("This is a toast notification !");
  return (
    <div>
    <button onClick={notify}>Notify !</button>
    <ToastContainer />
  </div>
  )
}

Предупреждение

const notify = () => toast.warning("This is a toast notification !");
function Toastify(){
  const notify = () => toast.warning("This is a toast notification !");
  return (
    <div>
    <button onClick={notify}>Notify !</button>
    <ToastContainer />
  </div>
  )
}

Ошибка

const notify = () => toast.error("This is a toast notification !");
function Toastify(){
  const notify = () => toast.error("This is a toast notification !");
  return (
    <div>
    <button onClick={notify}>Notify !</button>
    <ToastContainer />
  </div>
  )
}

Настройка положения всплывающего уведомления

Вы можете установить позицию уведомления Toast из множества предустановленных позиций, доступных в библиотеке react toastify.

доступные позиции:

верхний левый
в правом верхнем углу
верхний центр
Нижний левый
Нижний правый
нижний центр

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

Чтобы добавить настройку позиции, вам нужно отредактировать ToastContainer и установить свойство позиции, например

<ToastContainer
position="top-right" />

В нашем примере вы можете установить его как

function Toastify(){
  const notify = () => toast.error("This is a toast notification !");
  return (
    <div>
    <button onClick={notify}>Notify !</button>
	    <ToastContainer
    	position="top-right"
    	/>
  </div>
  )
}

вы можете установить другие настройки следующим образом:

<ToastContainer
position="top-left"
/>

<ToastContainer
position="top-right"
/>
    
<ToastContainer
position="top-center"
/>
    
<ToastContainer
position="bottom=left"
/>

<ToastContainer
position="bottom-right"
/>
    
<ToastContainer
position="bottom-center"
/>

Различные позиции выглядят так

верхний левый

в правом верхнем углу

верхний центр

Нижний левый

Нижний правый

нижний центр

Пользовательский стиль уведомления с помощью HTML и CSS

Вы можете настроить стиль всплывающего уведомления с помощью HTML и CSS, вот как вы можете настроить уведомление

Существует множество переменных CSS, которые доступны библиотеке react toastify. Вы можете переопределить их и выполнить настройку, которая будет работать для большинства людей.

Вот переменные, которые вы можете переопределить:

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-toast-width: 320px;
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;

  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  //Used only for colored theme
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;

  // Used when no type is provided
  // toast("**hello**")
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  // Used when no type is provided
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
}

Если изменения переменных недостаточно для вас. Вы можете переопределить существующий класс. Вот классы, которые вы можете легко переопределить

/** Used to define container behavior: width, position: fixed etc... **/
.Toastify__toast-container {
}

/** Used to define the position of the ToastContainer **/
.Toastify__toast-container--top-left {
}
.Toastify__toast-container--top-center {
}
.Toastify__toast-container--top-right {
}
.Toastify__toast-container--bottom-left {
}
.Toastify__toast-container--bottom-center {
}
.Toastify__toast-container--bottom-right {
}

/** Classes for the displayed toast **/
.Toastify__toast {
}
.Toastify__toast--rtl {
}
.Toastify__toast-body {
}

/** Used to position the icon **/
.Toastify__toast-icon {
}

/** handle the notification color and the text color based on the theme **/
.Toastify__toast-theme--dark {
}
.Toastify__toast-theme--light {
}
.Toastify__toast-theme--colored.Toastify__toast--default {
}
.Toastify__toast-theme--colored.Toastify__toast--info {
}
.Toastify__toast-theme--colored.Toastify__toast--success {
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
}
.Toastify__toast-theme--colored.Toastify__toast--error {
}

.Toastify__progress-bar {
}
.Toastify__progress-bar--rtl {
}
.Toastify__progress-bar-theme--light {
}
.Toastify__progress-bar-theme--dark {
}
.Toastify__progress-bar--info {
}
.Toastify__progress-bar--success {
}
.Toastify__progress-bar--warning {
}
.Toastify__progress-bar--error {
}
/** colored notifications share the same progress bar color **/
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
}

/** Classes for the close button. Better use your own closeButton **/
.Toastify__close-button {
}
.Toastify__close-button--default {
}
.Toastify__close-button > svg {
}
.Toastify__close-button:hover,
.Toastify__close-button:focus {
}

вы также можете создать свой собственный стиль, используя файл scss. Просто отредактируйте каталог scss и создайте собственную таблицу стилей.

Если вы просто хотите изменить некоторые цвета и тому подобное, вы можете легко сделать это, изменив некоторые переменные.

переменные определены в файле __variables.scss

Передача классов CSS компонентам

ToastContainer будет принимать следующие реквизиты для стилизации:

className
toastClassName
bodyClassName
ProgressClassName
стиль

toast("Custom style", {
  className: "black-background",
  bodyClassName: "grow-font-size",
  progressClassName: "fancy-progress-bar",
});

Вот как вы можете настроить тост-уведомление

Использование переходов и анимации

Когда дело доходит до анимации, существуют миллионы способов анимировать тост-уведомление.

m и, конечно же, вы также можете создавать свои собственные анимации

Четыре доступных перехода:

подпрыгивать
горка
зум
подбросить

Вы можете использовать один из переходов по умолчанию, например

чтобы добавить переход по умолчанию, импортируйте переходы из react-toastify, а затем в ToastContainer добавьте переход, как показано выше.

Вы также можете реализовать переход для каждого тоста, чтобы у вас был разный переход для разных тостов.

Вместо ToastContainer добавьте настройку перехода в функцию тоста

import { Bounce, Slide, Zoom, ToastContainer, toast } from 'react-toastify';    
  const notify = () => toast.success("This is a toast notification !");

<ToastContainer
    transition={Zoom}
    />
  </div>
function Toastify(){
  const notify = () => toast.success("This is a toast notification !",{
    transition: Slide
  });

  return (
    <div>

    <button onClick={notify}>Notify !</button>

    <ToastContainer
    />
  </div>
  )
}

Для пользовательского перехода создайте собственный переход и импортируйте его в свой файл App.js, а затем используйте его в ToastContainer или функции всплывающего уведомления, как вы используете переход по умолчанию. нравиться

import { Bounce, Slide, Zoom, ToastContainer, toast } from 'react-toastify';    
  const notify = () => toast.success("This is a toast notification !");

<ToastContainer
    transition={yourCustomTransition}
    />
  </div>

Тост-сообщения на основе обещаний

Реакция toasitfy предоставляет функцию toast.promise. Вы можете добавить обещание или функцию, которая возвращает обещание.

Когда это обещание будет выполнено или не будет выполнено, уведомление будет соответствующим образом обновлено.

Когда обещание находится на рассмотрении, также отображается счетчик уведомлений.

function Toastify(){

  const resolveAfter2Seconds = new Promise(resolve => setTimeout(resolve, 2000))
  const notify = () => toast.promise(resolveAfter2Seconds, {
    pending: "waiting for the promise to resolve",
    success: "promise resolved successfully",
    error: "promise failed to resolve"
  });

  return (
    <div>

    <button onClick={notify}>Notify !</button>

    <ToastContainer
    />
  </div>
  )
}

Вот как вы можете создать всплывающее сообщение на основе обещания.

Отображение простого сообщения полезно в большинстве случаев. Для дополнительной интерактивности вы можете отобразить сообщение в соответствии с ответом на обещание.

Вы можете показать какое-то сообщение, если обещание успешно разрешается, или показать какое-то другое сообщение, если обещание не может быть разрешено, и даже показать сообщение, когда обещание находится в ожидании.

Вот как это можно реализовать:

function Toastify(){

  const notify = new Promise(resolve => setTimeout(() => resolve("this is soo cool"), 2000));
toast.promise(
    notify,
    {
      pending: {
        render(){
          return "Promise Pending"
        },
        icon: false,
      },
      success: {
        render({data}){
          return `Great, ${data}`
        },
        // other options
        icon: "👍",
      },
      error: {
        render({data}){
          // When the promise reject, data will contains the error
          return <MyErrorComponent message={data.message} />
        }
      }
    }
)
  return (
    <div>

    <button onClick={notify}>Notify !</button>

    <ToastContainer
    />
  </div>
  )
}

Обработка автоматического закрытия

Свойство autoClose всплывающего уведомления принимает продолжительность в миллисекундах или false.

import { ToastContainer, toast } from 'react-toastify';

//Close the toast after 2 seconds
    <ToastContainer
    autoClose={2000}
    />

Вы также можете индивидуально закрывать каждое всплывающее уведомление в разные моменты времени.

function Toastify(){

  
  const notify = () => toast("closeAfter10Seconds", {
  autoClose: 10000
  });

  const notify2 = () => toast("closeAfter2Seconds", {
    autoClose: 2000
    });

  return (
    <div>

    <button onClick={notify} >Notify !</button>
    <button onClick={notify2} >Notify2 !</button>

    <ToastContainer
    autoClose={2000}
    />
  </div>
  )
}

Вы также можете предотвратить закрытие всплывающего уведомления по умолчанию, используя оператор false вместо секунд, таких как

toast("hi",
	{
    autoClose: false
    });

Строка рендеринга, число и компонент

Вы можете визуализировать любой реагирующий узел, включая строку, число или даже компонент. Вот как вы можете это сделать

import React from "react";
import { ToastContainer, toast } from 'react-toastify';

const Data = ({closeToast, toastProps})=>{
  <div>
  Hi how are you? 
  {toastProps.position}
  <button>Retry</button>
  <button onClick={closeToast}>close</button>

</div>
}

function Toastify(){

  
  const notify = () => toast(
    <Data />
  );

  return (
    <div>

    <button onClick={notify} >Notify !</button>

    <ToastContainer
    />
  </div>
  )
}

Установка пользовательских значков, использование встроенных значков и отключение

В библиотеке toastify доступны встроенные значки, которые полезны в большинстве случаев, вы можете включить настраиваемые значки для своего приложения и, наконец, вы также можете удалить значки из самого всплывающего уведомления.

Для всех типов всплывающих уведомлений отображаются соответствующие значки, поэтому вы можете указать тип всплывающего уведомления и отобразить соответствующий значок.

Пользовательский значок

чтобы отобразить собственный значок, просто укажите тип всплывающего уведомления с помощью значка, например, так

//you can use a string
toast.success("custom toast icons". {
              icon: "👍"
});

//or a component
toast.success("custom toast icons". {
              icon: CustomIcon
});
// or a function
toast.success("custom toast icons". {
              icon: ({theme,type}) => <img src="url"/>
});

Пауза taost, когда окно теряет фокус

Поведение всплывающего уведомления по умолчанию — пауза всякий раз, когда окно теряет фокус. Но вы можете настроить его так, чтобы он не приостанавливался, установив для свойства pauseOnFocusLoss значение false, например

//All all toasts
<ToastContainer pauseOnFocusLoss={false} />

// for individual toasts
toast('cool', {
  pauseOnFocusLoss: false
})

Отложить тост-уведомление

Чтобы отложить отображение уведомлений, вы можете использовать setTimeout или использовать hte delay prop, который использует setTimeout под капотом.

toast('cool')
toast('how are you?', {delay: 1000});

Ограничьте количество отображаемых тостов

Уведомление может быть удобным, но может отображаться несколько уведомлений.

Вы можете ограничить количество отображаемых уведомлений с помощью параметра limit

import React from 'react';
import { toast, ToastContainer } from 'react-toastify';

import 'react-toastify/dist/ReactToastify.css';

// Display a maximum of 3 notifications at the same time
function App(){
  const notify = () => {
    toast("lorem ipsum");
  }

  return (
    <div>
      <button onClick={notify}>Click on me a lot!</button>
      <ToastContainer limit={3}>
    </div>
  )
}

Когда количество отображаемых всплывающих уведомлений достигает предела, оставшиеся всплывающие уведомления добавляются в очередь, а затем отображаются всякий раз, когда доступен слот.

Вы также можете очистить очередь, чтобы очистить очередь, чтобы больше не отображались тосты, используйте метод clearWaitingQueue()

toast.clearWaitingQueue();

Реализация контролируемого индикатора выполнения

Если вы программируете загрузку файла или что-то еще, где вам нужно указать ход выполнения программы, тогда может пригодиться контролируемый индикатор выполнения, указывающий, что этот процесс

Давайте посмотрим на пример, где мы загружаем файл на сервер, и индикатор выполнения будет загружаться по мере загрузки файла.

import React from 'react';
import axios from 'axios';
import { toast } from 'react-toastify';

function demoOfProgressBar(){
  // Keeping a reference of the toast id
  const toastId = React.useRef(null);

  function uploadFiles(){
    axios.request({
      method: "post", 
      url: "/cool", 
      data: informationToBeUploaded, 
      onUploadProgress: p => {
        const progress = p.loaded / p.total;

        // see if the toast is being displayed
        if (toastId.current === null) {
          toastId.current = toast('Uploading', { progress });
        } else {
          toast.update(toastId.current, { progress });
        }
      }
    }).then(data => {
      //When the upload is done the progress bar will close and the transition will end
      toast.done(toastId.current);
    })
  }

  return (
    <div>
      <button onClick={uploadFiles}>Upload files to server</button>
    </div>
  )
}

Обновление всплывающего уведомления, когда происходит событие

Вы можете обновить всплывающее уведомление, когда происходит событие. Например, если вы загружаете файл на сервер, вы можете обновить всплывающее уведомление, когда загрузка завершена.

Что можно обновить

Измените тип всплывающего уведомления или измените цвет или тему
Изменить содержание всплывающего уведомления
Примените переход, когда произойдет изменение

Давайте посмотрим на это с примерами в действии

1. Измените тип тоста или измените цвет или тему.

import React from 'react';
import { toast } from 'react-toastify';

function changeToast() {
  const toastId = React.useRef(null);

  const notify = () => toastId.current = toast("this is soo cool", { autoClose: false });

  const updateToast = () => toast.update(toastId.current, { type: toast.TYPE.INFO, autoClose: 2000 });

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <button onClick={updateToast}>Update</button>
    </div>
  );
}

2. Измените содержание всплывающего уведомления

Изменить содержание тоста также легко. Просто передайте любой допустимый элемент или даже реагирующий компонент.

В приведенных ниже примерах я покажу, как визуализировать строку, а также компонент для изменения всплывающего уведомления в действии.

// With a string
 toast.update(toastId, {
    render: "New content",
    type: toast.TYPE.INFO,
    autoClose: 5000
  });

// Or with a component
toast.update(toastId, {
    render: MyComponent
    type: toast.TYPE.INFO,
    autoClose: 5000
});

toast.update(toastId, {
    render: () => <div>New content</div>
    type: toast.TYPE.INFO,
    autoClose: 5000
});

3. Примените переход, когда произойдет изменение

Если вы хотите применить переход, когда происходит изменение, вы можете использовать свойство className или transition для достижения этого.

toast.update(toastId, {
  render: "stuff",
  type: toast.TYPE.INFO,
  transition: Zoom
})

Пользовательская кнопка закрытия или удалить кнопку закрытия

Вы можете передать пользовательскую кнопку закрытия контейнеру тостов и переопределить кнопку по умолчанию.

Вот как вы можете это сделать.

import React from 'react';
  import { toast, ToastContainer } from 'react-toastify';

  const CloseButton = ({ closeToast }) => (
    <i
      className="fastly-buttons"
      onClick={closeToast}
    >
    delete
    </i>
  );

function App() {
  const notify = () => {
    toast("this is a toast notification");
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>;
      <ToastContainer closeButton={CloseButton} />
    </div>
  );
}

Вот как вы можете определить его для каждого тоста

toast("this is a toast notification", {
  closeButton: CloseButton
})

Вы также можете удалить его глобально и показать его для каждого всплывающего уведомления или показать его глобально и скрыть для каждого всплывающего уведомления, например:

toast("this is a toast notification", {
  closeButton: true
})

//hide it per toast and show globally
toast("this is a toast notification", {
  closeButton: false
})

Добавление действия «Отменить» во всплывающие сообщения

Вы можете добавить кнопку отмены к всплывающим сообщениям. Например, если кто-то выполнил действие, которое он хочет отменить, он может легко отменить действие, нажав кнопку отмены.

Перетащите, чтобы удалить

вы можете перетащить тост, чтобы удалить его. Вам нужно определить процент ширины, чтобы удалить тост. Вы также можете отключить перетаскивание для удаления.

установить процент перетаскивания при удалении всплывающего уведомления

передайте реквизиты draggablepercent с процентом экрана, который необходимо перетащить, чтобы удалить тост, следующим образом

<toastContainer draggablePercent={50} />
toast('Cool',{
    draggablePercent: 90
})

Чтобы отключить возможность перетаскивания для закрытия, передайте свойство false to draggable.

<ToastContainer draggable={false} />

Вы можете отключить всплывающее уведомление следующим образом.

toast('Cool',{
    draggable: false
})

Вот как вы можете включить перетаскивание для удаления в ответном уведомлении Toastify.