ReactPings

Introduction

Getting StartedInstallationThemeCustomization

Api

SuccessErrorWarningInfoBlankPromise

Hooks

usePings
HomeDocsCustomization

Customization

Customize without limits.

React-Pings is created with customizable design system, which make it easy to customize only with props without any complexity.

Global Level Customizations

Global level customizations apply at global level which make all toast work at similar way.

Toast Positions

Use 6 position direactions to make sure user get every toast at the position of its choice.

Valid positions are:

  • top-left
  • top-center (default)
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right
Typescript
1<PingsToastsProvider position="top-center">
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider position="top-center">
2  <App />
3</PingsToastsProvider>

Toast Duration

Any valid number in the range of 5-15 is used as toast duration.

Typescript
1<PingsToastsProvider toastDuration={7}>
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider toastDuration={7}>
2  <App />
3</PingsToastsProvider>

Theme

React-Pings have built in theme support for dark, light and system mode.

Typescript
1<PingsToastsProvider theme="system">
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider theme="system">
2  <App />
3</PingsToastsProvider>

See theme guide for detailed information

Animation Easing

All valid CSS easing are also used as toast easing. e.g. easeIn, easeOut, easeInOut

Typescript
1<PingsToastsProvider animationEase="easeIn">
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider animationEase="easeIn">
2  <App />
3</PingsToastsProvider>

Animation Type

React-Pings support two animation types:

  1. spring (default)
  2. tween
Typescript
1<PingsToastsProvider animationType="spring">
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider animationType="spring">
2  <App />
3</PingsToastsProvider>

Dismissable

Dismissable take boolean type value if true adds dismiss button at the top-right corner of toast. Default is false,

Typescript
1<PingsToastsProvider dismissable={false}>
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider dismissable={false}>
2  <App />
3</PingsToastsProvider>

Icons Visibility

Used to change icons visibility, if visible all icons are visible for every toast and if hidden all icons hidden for every toast.

Types of values accept two types of value:

  1. visibile (default)
  2. hidden
Typescript
1<PingsToastsProvider visibility="visible">
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider visibility="visible">
2  <App />
3</PingsToastsProvider>

Toasts Limit

Any valid number in the range of 10-20 is used as toast limit. Limits numbers of toast visibile at a time on screen. Default is 10.

Typescript
1<PingsToastsProvider toastsLimit={10}>
2  <App />
3</PingsToastsProvider>
1<PingsToastsProvider toastsLimit={10}>
2  <App />
3</PingsToastsProvider>

CSS Inline Style

Inline CSS also supported at global level, but with a twist. CSS you pass through props is applied on the container which renders all the toast, not at toast component.

Typescript
1<PingsToastsProvider
2  style={{
3    backgroundColor: "red",
4  }}
5>
6  <App />
7</PingsToastsProvider>
1<PingsToastsProvider
2  style={{
3    backgroundColor: "red",
4  }}
5>
6  <App />
7</PingsToastsProvider>

Components Level Customizations

Components level customizations apply at single component not for all.

Important : Components level customizations are applied at component level, because every type toast may have different type of customizations. It means if you add a icon to success toast, so it is only applied to success toast not at all.

Icons

React-Pings supports for string, emoji, svg, image or even another component as icons.

Typescript
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("Success Toast", {
8      icon: "😉",
9    });
10  };
11
12  return <button onClick={showToast}>Show Toast</button>;
13};
14export default MyComponent;
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("Success Toast", {
8      icon: "😉",
9    });
10  };
11
12  return <button onClick={showToast}>Show Toast</button>;
13};
14export default MyComponent;

Title

Title is used as a heading for toast, which can represent behavour of toast like which type of toast is this.

Typescript
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("File saved successfully`", {
8      title: "Success",
9    });
10  };
11
12  return <button onClick={showToast}>Show Toast</button>;
13};
14export default MyComponent;
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("File saved successfully`", {
8      title: "Success",
9    });
10  };
11
12  return <button onClick={showToast}>Show Toast</button>;
13};
14export default MyComponent;

Toast Duration

Any valid number in the range of 5-15 is used as toast duration.

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

CSS Inline Style

Inline CSS also supported at global level, but with a twist. CSS you pass through props is applied on the container which renders all the toast, not at toast component.

Typescript
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("Success Toast", {
8      style: {
9        backgroundColor: "green",
10      },
11    });
12  };
13
14  return <button onClick={showToast}>Show Toast</button>;
15};
16export default MyComponent;
1import { usePings } from "react-pings";
2
3const MyComponent = () => {
4  const ping = usePings();
5
6  const showToast = () => {
7    ping.success("Success Toast", {
8      style: {
9        backgroundColor: "green",
10      },
11    });
12  };
13
14  return <button onClick={showToast}>Show Toast</button>;
15};
16export default MyComponent;
PrevThemeNextSuccess