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 компонент.