React-pretty-alert2 NPM

react-pretty-message

A pretty show message for warning, success, error or question

Caution: This project is in development and test experiment, please, I should you don't install it until version 1.0.0

Install

npm install --save react-pretty-message
yarn add react-pretty-message

Usage

import React from "react";

import "./App.css";
import { RPAProvider } from "react-pretty-alert";
import MyPage from "./MyPage";
import "react-pretty-alert/dist/index.css";

function App() {
  return (
    <RPAProvider>
      <MyPage />
    </RPAProvider>
  );
}

export default App;

In another page, you can call the alerts

import React, { useEffect } from "react";

import {
  useDefault,
  useError,
  useInfo,
  useQuestion,
  useSuccess,
  useWarning
} from "react-pretty-alert";

export default function Teste() {
  const defaultMessage = useDefault();
  const error = useError();
  const info = useInfo();
  const question = useQuestion();
  const success = useSuccess();
  const warning = useWarning();

  useEffect(() => {
    question({
      title: "Choose one",
      message: "What kind of message do you want?",
      buttons: [
        {
          text: "Success",
          callback: () => {
            success({
              title: "Title success",
              message: "Message Success"
            });
          }
        },
        {
          text: "Warning",
          callback: () => {
            warning({
              title: "Title Warning",
              message: "Message Warning"
            });
          }
        },
        {
          text: "Info",
          callback: () => {
            info({
              title: "Title info",
              message: "Message info"
            });
          }
        },
        {
          text: "Error",
          callback: () => {
            error({
              title: "Title error",
              message: "Message Errro"
            });
          }
        },
        {
          text: "Default",
          callback: () => {
            defaultMessage({
              title: "Title default",
              message: "Message default"
            });
          }
        }
      ]
    });
  }, []);

  return <div>This is MyPage</div>;
}