Getting Started

Stop using boring toast notification! Try React-Pings.

React-Pings is a modern solution for adding toast notifications to react apps, built on reactjs, tailwindcss & motion to give high performance without unnecessary re-renders to deliver top-notch performance in just 4kb size.

What is React-Pings?

It is a toast notification library for modern react app built for deliver awesome toast without re-render complete app, which make it different from others. It is easy to use with top-level customizations.

Why use React-Pings?

It provides large number of benefits which make developer happy to use

1. Built on react 19
2. No re-renders
3. Elegent designs (should be more improved)
4. Support for light & dark theme
5. Easy to implement/customize
6. Built in support for promises
7. Support for functions & jsx
8. Provides ui to customize toast
9. Rich api support

Quick Start

Using react-pings in your project is just 3 steps process decribed below:

Installation

Install react-pings from npm or any other package manager.

npm install react-pings

npm install react-pings

See complete installation for framework guides.

Provides

Wrap your app into PingsToastsProvider to enable toasts from any component.

Typescript

1import { PingsToastsProvider } from "react-pings";
2import "../node_modules/react-pings/dist/index.css";
3
4createRoot(document.getElementById("root")!).render(
5  <PingsToastsProvider
6    position="top-center"
7    toastDuration={5}
8    animationEase="spring"
9    dismissable={false}
10    icons="visible"
11    toastLimit={10}
12  >
13    <App />
14  </PingsToastsProvider>
15);

1import { PingsToastsProvider } from "react-pings";
2import "../node_modules/react-pings/dist/index.css";
3
4createRoot(document.getElementById("root")!).render(
5  <PingsToastsProvider
6    position="top-center"
7    toastDuration={5}
8    animationEase="spring"
9    dismissable={false}
10    icons="visible"
11    toastLimit={10}
12  >
13    <App />
14  </PingsToastsProvider>
15);

See customizations options for your toasts.

Usage

Now your app is compatible to generate toast from anywhere just import usePings hook into your app and create any type of toast.

Typescript

1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("Success Toast");
8  };
9
10  return <button onClick={showToast}>Show Toast</button>;
11};

1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("Success Toast");
8  };
9
10  return <button onClick={showToast}>Show Toast</button>;
11};

See all components for other types of toasts.