Query Toast

Query Toast is a lightweight and customizable toast notification library for React applications.

Installation

You can install Query Toast via npm or yarn:

npm install query-toast

yarn add query-toast

Usage

Importing

import { qt, QTContainer } from 'query-toast';

Example Usage

import { qt, QTContainer } from 'query-toast';

function ExampleComponent() {
  const handleSuccess = async () => {
    // Simulate an asynchronous process with a delay of 1000ms
    await new Promise(resolve => setTimeout(resolve, 1000));
    return { message: "Success! Process completed." };
  };

  const handleError = async () => {
    // Simulate an asynchronous process with a delay of 1000ms
    await new Promise(resolve => setTimeout(resolve, 1000));
    return { type: "error", message: "An error occurred." };
  };

  return (
    <div>
      <QTContainer />

      <button onClick={() => {
        qt(handleSuccess);
      }}>
        Show Success Toast
      </button>

      <button onClick={() => {
        qt(handleError);
      }}>
        Show Error Toast
      </button>
    </div>
  );
}

export default ExampleComponent;

In this example, the handleSuccess and handleError functions simulate asynchronous processes using setTimeout to delay the resolution of a promise by 1000 milliseconds. Then, they return the corresponding message or error object. When the buttons are clicked, these functions are passed to qt, triggering the toast notifications after the specified delay.

    <QTContainer />

onClick={() => {
      qt(async() => {
        // handle your process...
        return({ message: "ok"});
      });
    }}

onClick={() => {
      qt(() => {
        // handle your process...

        return({ 
                type: "error"
                message: "...error / rejected"
                })
      });
    }}