Управляйте временными элементами UI с помощью хука React позволяющего отображать или скрывать элемент
use-temporary-disclosure
use-temporary-disclosure — это перехватчик React, который обеспечивает простой способ управления видимостью элементов пользовательского интерфейса в течение определенного периода времени. Он идеально подходит для временных уведомлений, всплывающих подсказок или любого компонента, который должен появляться в течение ограниченного времени. Хук предлагает простые, но мощные функции для отображения и скрытия элементов с контролем времени и функциями обратного вызова.
Установка
Чтобы установить пакет, выполните следующую команду в каталоге вашего проекта:
npm install use-temporary-disclosureПример использования
Вот базовый пример того, как использовать use-temporary-disclosure в вашем компоненте React для отображения компонента уведомления в течение 5000 мс.
import useTemporaryDisclosure from 'use-temporary-disclosure';
const DemoComponent = () => {
const { isOpen, openFor } = useTemporaryDisclosure();
const handleShowNotification = () => {
openFor({
duration: 3000,
callback: () => alert('Notification closes now'),
});
};
return (
<div
style={{
width: '100vw',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<button
onClick={handleShowNotification}
style={{ cursor: 'pointer' }}
>
Show Notification
</button>
{isOpen && (
<div style={{ color: 'green' }}>Notification content.</div>
)}
</div>
);
};
export default DemoComponent;Справочник по API
useTemporaryDisclosure возвращает объект со следующими свойствами:
const { openFor, isOpen, openIn, closeIn } =
useTemporaryDisclosure();Для удобства использования
openFor(opts: TemporaryDisclosureFunctionOpts): Устанавливает состояние открытия, затем автоматически закрывает его по истечении заданного времени и выполняет функцию обратного вызова.
isOpen: логическое значение Указывает текущее открытое состояние.
Если вам нужен точный контроль зерна
openIn(opts: TemporaryDisclosureFunctionOpts): Устанавливает состояние открытия после задержки и выполняет функцию обратного вызова.
closeIn(opts: TemporaryDisclosureFunctionOpts): Устанавливает состояние закрытия после задержки и выполняет функцию обратного вызова.
TemporaryDisclosureFunctionOpts принимает необязательную продолжительность в миллисекундах и необязательный обратный вызов.
Лицензия
Этот проект лицензируется по лицензии MIT – подробности см. в файле ЛИЦЕНЗИИ.
Сотрудничество
Не стесняйтесь предлагать улучшения или отправлять PR!
Что будет, если вы запустите это локально
Учитывая, что у вас есть приложение create-react-app для локального тестирования пакета, используйте те же версии React. Для этого вам следует связать или импортировать реакции и реакции-дом из use-temporary-disclosure.
npm install ../../path-to/use-temporary-disclosure/node_modules/react
