@hypothesis/frontend-shared/lib/hooks/use-toast-messages.js

Shared components, styles and utilities for Hypothesis projects

import { useCallback, useState } from 'preact/hooks';
// Keep a global incremental counter to use as unique toast message ID
let toastMessageCounter = 0;
function dataToToastMessage(toastMessageData) {
  toastMessageCounter++;
  const id = `${toastMessageCounter}`;
  return {
    ...toastMessageData,
    id
  };
}

/**
 * Hook providing a simple way to handle state for {@link ToastMessages}
 */
export function useToastMessages(initialToastMessages = []) {
  const [toastMessages, setToastMessages] = useState(initialToastMessages.map(dataToToastMessage));
  const appendToastMessage = useCallback(toastMessageData => {
    setToastMessages(messages => [...messages, dataToToastMessage(toastMessageData)]);
  }, []);
  const dismissToastMessage = useCallback(id => setToastMessages(messages => messages.filter(message => message.id !== id)), []);
  return {
    toastMessages,
    appendToastMessage,
    dismissToastMessage
  };
}
//# sourceMappingURL=use-toast-messages.js.map