React suite es una biblioteca de componentes de React con un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.
El componente de notificación de React Suite muestra mensajes de notificación en la pantalla
cerrable: Es un valor booleano. Indica si mostrar o no mostrar el botón Eliminar. Por defecto es verdadero.
Sintaxis:
<Notification closable={}> ... </Notification>
Requisito previo:
- Introducción e instalación reactJS
- Componente de notificación de reacción
- Gancho de reacción useState
Creación de la aplicación React y la instalación del módulo:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .
npm 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 usando el siguiente comando:
npm install rsuite
Estructura del proyecto: Se verá así:
Ejemplo 1 : en este ejemplo, importamos el componente de notificación de «rsuite» y aplicamos los estilos predeterminados de los componentes que importamos «rsuite/dist/rsuite.min.css».
Estamos agregando dos componentes de notificación, dentro del componente estamos agregando un div con algo de texto y algo de estilo en línea, el primer componente lo mantuvimos tal como está, y al siguiente pasamos el accesorio que se puede cerrar .
- App.js: escriba el siguiente código en el archivo app.js:
App.js
import { Notification } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
return (
<div className="App">
<h4>React Suite <Notification> Prop</h4>
<Notification>
<div style={{ backgroundColor: "#D6FFA2", padding: 40 }}>
<h6>Welcome to Geeksforgeeks !</h6>
<p>( default )</p>
</div>
</Notification>
<Notification closable>
<div style={{ backgroundColor: "#EEBEFF", padding: 40 }}>
<h6>Welcome to Geeksforgeeks !</h6>
<p>( Added closable )</p>
</div>
</Notification>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Ejemplo 2: estamos creando un cierre de nombre de estado inicializado como falso usando el gancho de reacción useState , estamos importando useState desde ‘react’. Al componente de notificación, al accesorio que se puede cerrar , le estamos pasando el estado de cierre.
Estamos agregando un botón en nuestro div que llama a la función handleClick onClick que cambia el estado del cierre.
- App.js: escriba el siguiente código en el archivo app.js:
App.js
import { useState } from "react";
import { Notification } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
const [close, SetClose] = useState(false);
const handleClick = () => {
SetClose(!close);
};
return (
<div className="App">
<h4>React Suite <Notification> Prop</h4>
<Notification header="Hey Geek!" closable={close}>
<div style={{ backgroundColor: "#D6FFA2", padding: 40 }}>
<h4>closable = {"" + close}</h4>
set it to
<button
onClick={handleClick}
style={{ boxShadow: "-2px 3px 5px 0px",
marginLeft: 10 }}
>
{"" + !close}
</button>
</div>
</Notification>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://rsuitejs.com/components/notification/#closeable