Componente de notificación de diseño de hormigas de la interfaz de usuario de ReactJS

. El componente de notificación se utiliza para mostrar un mensaje de notificación globalmente. Podemos usar el siguiente enfoque en ReactJS para usar el componente de notificación de diseño Ant.

Accesorios de configuración de notificaciones:

• bottom: cuando la ubicación es bottomRight o bottomLeft , se usa para indicar la distancia desde la parte inferior de la ventana gráfica.
• btn: Se utiliza para el botón de cierre personalizado.
• className: Se utiliza para la clase CSS personalizada.
• closeIcon: Se utiliza para el icono de cierre personalizado.
• descripción: se utiliza para indicar el contenido del cuadro de notificación.
• duración: Se utiliza para establecer el tiempo antes de que se cierre la Notificación. La unidad son los segundos.
• getContainer: se utiliza para devolver el Node de montaje para la notificación.
• icon: Se utiliza para el icono personalizado.
• clave: Se utiliza para la identidad única de la Notificación.
• mensaje: se utiliza para indicar el título del cuadro de notificación.
• colocación: Se utiliza para posicionar la Notificación. Los valores pueden ser topLeft, topRight, bottomLeft y bottomRight .
• estilo: Se utiliza para el estilo en línea personalizado.
• top: cuando la ubicación es topRight o topLeft, se utiliza para indicar la distancia desde la parte superior de la ventana gráfica.
• onClick: es una función de devolución de llamada que se activa cuando se hace clic en la notificación.
• onClose: es una función de devolución de llamada que se activa cuando se cierra la notificación.

Props de configuración predeterminada de notificación:

• bottom: cuando la ubicación es bottomRight o bottomLeft , se usa para indicar la distancia desde la parte inferior de la ventana gráfica.
• closeIcon: Se utiliza para el icono de cierre personalizado.
• duración: Se utiliza para establecer el tiempo antes de que se cierre la Notificación. La unidad son los segundos.
• getContainer: se utiliza para devolver el Node de montaje para la notificación.
• colocación: Se utiliza para posicionar la Notificación. Los valores pueden ser topLeft, topRight, bottomLeft y bottomRight .
• rtl: Se utiliza para indicar si habilitar o no el modo RTL.
• top: cuando la ubicación es topRight o topLeft, se utiliza para indicar la distancia desde la parte superior de la ventana gráfica.

Creación de la aplicación React e instalación del módulo:

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

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { Button, notification } from 'antd';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Notification Component</h4>
      <Button type="primary" onClick={() => {
        notification.open({
          message: 'Sample-Notification-Title',
          description:
            'Sample Notification Description',
          onClick: () => {
            console.log('Notification Clicked!');
          },
        });
      }}>
        Click to see Notification Box
      </Button>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/notification/