Свой простой toast react?

Toast в React — это компонент, который позволяет отображать всплывающие уведомления для пользователя. Всплывающие уведомления (также известные как toastы или уведомления-подсказки) являются важной частью пользовательского опыта веб-приложений, поскольку они предоставляют информацию или подсказки о действиях пользователя.

Для создания простого toast компонента в React, вы можете использовать стороннюю библиотеку, такую ​​как react-toastify или создать свой собственный компонент.

Вот пример простого toast компонента, который можно легко создать с использованием React Hooks:

import React, { useState, useEffect } from 'react';

const Toast = ({ message, duration }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false);
    }, duration);

    return () => clearTimeout(timer);
  }, [duration]);

  return isVisible ? (
    <div className="toast">
      <p>{message}</p>
    </div>
  ) : null;
};

export default Toast;

В этом примере мы используем хук useState для отслеживания состояния видимости toast компонента. Когда компонент отрисовывается, мы устанавливаем значение isVisible в true. Затем, с помощью хука useEffect, мы устанавливаем задержку для скрытия компонента через определенное время, заданное в свойстве duration. Используя функцию clearTimeout возвращаемую из хука useEffect, мы очищаем таймер перед каждым повторным рендерингом компонента или его размонтированием.

На выходе мы отображаем компонент toast с сообщением, переданным через свойство message, если isVisible имеет значение true. Если isVisible имеет значение false, то компонент не отображается.

Вы можете стилизовать toast компонент с помощью CSS, добавив класс "toast" и определенные стили для отображения сообщения пользователя. Например:

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

import React from 'react';
import Toast from './Toast';

const App = () => {
  return (
    <div>
      <h1>Мое приложение React</h1>
      <button onClick={() => showToast()}>Показать уведомление</button>
      <Toast message="Пример уведомления" duration={3000} />
    </div>
  );
};

export default App;

В этом примере мы импортируем компонент Toast, который мы создали ранее, и добавляем его в основной компонент App. При клике на кнопку "Показать уведомление" вызывается функция showToast, которая может быть определена таким образом:

const showToast = () => {
  // Логика для отображения Toast
};

Внутри showToast функции вы можете изменить состояние, чтобы показать или скрыть toast компонент.