ReactPings

Introduction

Getting StartedInstallationThemeCustomization

Api

SuccessErrorWarningInfoBlankPromise

Hooks

usePings
HomeDocsInstallation

Installation

Complete installation guides for react framework.

This page guide you completely how to install & configure react-pings into your project or even in exinsting project.

Vite

Vite is a popular frontend build tool for that aims to provide a faster and leaner development experience for modern web projects. To get react-pings into new project follow the steps:

Create App

Create your project through npm or any other CLI tools

Terminal
npm create vite@latest my-app
npm create vite@latest my-app

This will ask you some prompts, select React, javascript/typescipt after this you have new folder my-app.

Now you have a vite app & completely able to install react-pings into your project. Just run the command into your termnal.

Terminal
cd my-app npm install react-pings npm run dev
cd my-app npm install react-pings npm run dev

This command install react-pings library into your project and start development server.

Usage

If you are in this section that means your project alredy have react-pings installed. Its time to use it according to your need.

Typescript
1// main.tsx/ts/jsx/js
2
3import { PingsToastsProvider } from "react-pings";
4import "../node_modules/react-pings/dist/index.css"; // import css if needs
5
6createRoot(document.getElementById("root")).render(
7  //<OtherProviders>
8  <PingsToastsProvider>
9    <App />
10  </PingsToastsProvider>
11  //</OtherProviders>
12);
1// main.tsx/ts/jsx/js
2
3import { PingsToastsProvider } from "react-pings";
4import "../node_modules/react-pings/dist/index.css"; // import css if needs
5
6createRoot(document.getElementById("root")).render(
7  //<OtherProviders>
8  <PingsToastsProvider>
9    <App />
10  </PingsToastsProvider>
11  //</OtherProviders>
12);

Make sure you wrap your <App /> is just one level in depth. Otherwise it will make problems with your other providers.

After following this step your app have usePings hook globally, just import it into any compenent and your compenent is now ready to produce toasts. Check the below code for example.

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};

Nextjs

Nextjs is very powerfull & popular react full stack framework used for building full stack applications.

Create App

Create your project through npm or any other CLI tool.

Terminal
npm create next-app@latest my-app -y
npm create next-app@latest my-app -y

This command use -y flag to go with default configuration & skip prompts you can run without it.

Now you have a nextjs app & completely able to install react-pings into your project. Just run the command into your termnal.

Terminal
cd my-app npm install react-pings npm run dev
cd my-app npm install react-pings npm run dev

This command install react-pings library into your project and now you can use it.

Usage

If you are in this section it means your project alredy have react-pings installed. Its time to use it according to your need.

Typescript
1// main.tsx/ts/jsx/js
2
3export default function RootLayout({
4  children,
5}: Readonly<{
6  children: React.ReactNode;
7}>) {
8  return (
9    <html
10      lang="en"
11      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
12    >
13      <body>
14        <PingsProvider>{children}</PingsProvider>
15      </body>
16    </html>
17  );
18}
1// main.tsx/ts/jsx/js
2
3export default function RootLayout({
4  children,
5}: Readonly<{
6  children: React.ReactNode;
7}>) {
8  return (
9    <html
10      lang="en"
11      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
12    >
13      <body>
14        <PingsProvider>{children}</PingsProvider>
15      </body>
16    </html>
17  );
18}

Make sure you wrap your {children} is just one level in depth. Otherwise it will make problems with your other providers.

After following this step your app have usePings hook globally, just import it into any compenent and your compenent is now ready to produce toasts. Check the below code for example.

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};
PrevGetting StartedNextTheme