Brendan Castaneda

Объяснение:
Я изменил имя переменной состояния isBlock на isBlocking, чтобы было понятнее, что она представляет.
Добавил прослушиватель событий к событию beforeunload, который будет запущен, когда пользователь попытается покинуть страницу.
Добавил этот прослушиватель событий в хук useEffect, чтобы его можно было очистить при размонтировании компонента.
Добавил функцию handleFormChange, которая будет запускаться каждый раз при изменении формы, она проверяет значение ввода или текстового поля, если оно больше 0, оно устанавливает для isBlocking значение true, в противном случае — значение false.
Добавил событие onchange в форму и текстовое поле и событие onClick на кнопке отмены, это вызовет функцию handleFormChange, а также позволит пользователю отменить и покинуть страницу без каких-либо подсказок.
Также добавил в форму кнопку отправки и удалил useEffect, который опрашивал элемент textarea, и setTimeout, который использовался для этого.
Также добавил сообщение к событию beforeunload, которое будет отображаться как подсказка для пользователя с просьбой подтвердить, хотят ли они покинуть страницу.

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

function MyPrompt() {
  const [isBlocking, setIsBlocking] = React.useState(false);
  const location = useLocation();

  const handleBeforeUnload = (event) => {
    if (isBlocking) {
      event.preventDefault();
      event.returnValue = "Are you sure you want to leave?";
    }
  };

  React.useEffect(() => {
    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [isBlocking]);

  const handleFormChange = (event) => {
    if (event.target.value.length > 0) {
      setIsBlocking(true);
    } else {
      setIsBlocking(false);
    }
  };

  return (
    <div>
      <form onChange={handleFormChange}>
        <input type="text" placeholder="Type something here" />
        <textarea placeholder="Type something here"></textarea>
        <button type="submit">Submit</button>
        <button type="button" onClick={() => setIsBlocking(false)}>Cancel</button>
      </form>
    </div>
  );
}

На этом сайте всё довольно подробно описано.

const gulp = require('gulp');
const smartGrid = require('smart-grid');
 
const options = {
   /* your grid settings here */
};
 
function grid(done){
   smartGrid('path-to-your-folder', options);
   done();
}
 
gulp.task('grid', grid);