ReactPings

Introduction

Getting StartedInstallationThemeCustomization

Api

SuccessErrorWarningInfoBlankPromise

Hooks

usePings
HomeDocsApiPromise

Promise

Promise is a type of toast which represents the promise status of any tasks. Its usage is quite different from other toasts.

Syntax

Typescript
1promise(promise, status, opts);
1promise(promise, status, opts);

Parameters

  • promise: Any javascript promise.
  • status: Status is a javascript object used to show different types of messages for different- different promise states.
    • loading: Any valid message string value to display on toast.
    • success: Any valid message string value to display on toast.
    • error: Any valid message string value to display on toast.
  • options: Options is a javascript object used to add additional information & customization options.
    • title: Any valid title string value show at the top of toast.
    • icon: Any string, emoji, image, svg or jsx element to show at the place of icon.
    • style: Any valid CSS property to apply on toast.
    • toastDuration: Any valid number between 1-15.

Usage

Just import usePings hook into any compenent and your compenent is now ready to produce toasts.

Typescript
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.promise(
8      new Promise((rej, res) => {
9        setTimeout(Math.random() > 0.5 ? rej : res, 1000); // example promise
10      }),
11      {
12        loading: "Saving...",
13        success: "Saved successfully",
14        error: "Error in saving",
15      }
16    );
17  };
18
19  return <button onClick={showToast}>Show Toast</button>;
20};
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.promise(
8      new Promise((rej, res) => {
9        setTimeout(Math.random() > 0.5 ? rej : res, 1000); // example promise
10      }),
11      {
12        loading: "Saving...",
13        success: "Saved successfully",
14        error: "Error in saving",
15      }
16    );
17  };
18
19  return <button onClick={showToast}>Show Toast</button>;
20};
PrevBlankNextusePings