¿Cómo agregar la función de notificación push en ReactJS?

En este artículo, aprenderemos cómo agregar una función de notificación push-on en una aplicación de reacción usando un paquete npm React-push-notification.

Características de React-push-notification:

• Módulo ligero
• Muy fácil de usar
• En TypeScript y compilado en JavaScript 

Requisito previo: 

• Introducción e instalación de react.js
• Estado de uso del gancho de reacción

Creando la aplicación React y la instalación del Módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando:

cd project

Paso 3: ahora instala la dependencia react-push-notification usando el siguiente comando:

npm i react-push-notification

Estructura del proyecto: Se verá así.

Ejemplo: Necesitamos agregar Notificaciones que importamos del módulo en la parte superior de los otros componentes. Esto actúa como el contenedor para la notificación, entonces necesitamos importar el método addNotification desde ‘react-push-notification’, el método actúa sobre una serie de parámetros que cambian nuestra notificación como título, color, etc.

Nombre de archivo: App.js: estamos creando un botón simple llamado notificación de inserción que activa la función onclick buttonOnClick que llama al método addNotification aquí He agregado el título como ‘Advertencia’ y nativo como verdadero. La opción nativa es falsa por defecto, esta propiedad nativa convierte la notificación en una notificación web nativa.

import addNotification from 'react-push-notification';
import { Notifications } from 'react-push-notification';
function App() {
  function buttonOnClick (){
    addNotification({
      title: 'Warning',
      native:true         
    })
  };
  return (
    <div className="App">
      <Notifications />
      <h1>Hey Geek!</h1>
      <button onClick={buttonOnClick}>
         Push Notification
      </button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

Además podemos crear nuestras propias notificaciones con diferentes colores y estilos.

En este ejemplo, vamos a crear una advertencia y una notificación de éxito.

Estamos creando un formulario simple que tendrá un solo nombre de campo de entrada y un botón de envío. Si hacemos clic en enviar sin ingresar un nombre, recibimos una notificación de advertencia y obtendremos éxito si completamos el campo de nombre.

Estamos creando un estado de nombre usando el gancho de reacción useState . En el campo de entrada, estamos creando una función OnChange que almacena el valor en el estado.

Para el botón de enviar en el formulario, estamos creando una función onClick que verifica si el estado del nombre está vacío o no. Si está vacío, activa la función de notificación de advertencia o, de lo contrario, activa la notificación de éxito. Para ambas notificaciones, hemos agregado títulos, mensajes, subtítulos e incluso hemos cambiado los colores.

import React, { useState } from "react";
import { Notifications } from 'react-push-notification';
import addNotification from 'react-push-notification';
  
function App() {
  const [name,setName] = useState("");
  
  function warningNotification (){
    addNotification({
      title: 'Warning',
      subtitle: 'Please fill it',
      message: 'You have to enter name',
      theme: 'red',
      closeButton:"X",
    })
  };
  
  function successNotification (){
    addNotification({
      title: 'Success',
      subtitle: 'You have successfully submitted',
      message: 'Welcome to GeeksforGeeks',
      theme: 'light',
      closeButton:"X",
      backgroundTop:"green",
      backgroundBottom:"yellowgreen"
    })
  };
  
  function handleSubmit(e){
    e.preventDefault();
    if(name === "")
      warningNotification();
    else
      successNotification()
  }
   
  return (
    <div className="App">
      <Notifications />
      <h1>Hey Geek!</h1>
      <form >
        <label>Name:</label>
        <input name="name" value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button onClick={handleSubmit} 
          type="submit">Submit
        </button>
      </form>
    </div>
  );
}
  
export default App;

Producción:

Referencia: https://www.npmjs.com/package/react-push-notification