Obtenga alertas coherentes y atractivas en su sitio de React con esta biblioteca.
Las alertas son mensajes que se muestran en un sitio web/aplicación web para transmitir información importante a un usuario. Desempeñan un papel crucial en las aplicaciones web. Hay muchas formas de crear alertas en React; Chakra UI hace que el proceso sea fácil y eficiente.
Chakra UI es una biblioteca de componentes popular para React que proporciona un conjunto de componentes de UI personalizables y accesibles.
Instalación de la interfaz de usuario de Chakra
Para usar la biblioteca de interfaz de usuario de Chakra, una de las muchas bibliotecas de componentes de reacción, primero debe instalarlo. Puede instalarlo ejecutando el siguiente comando de terminal en el directorio de su proyecto node.js:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativamente, puede instalar Chakra UI usando Yarn. Para hacerlo, ejecute el siguiente comando:
añadir hilo @chakra-ui/react @emotion/react @emotion/styled framer-motion
Configuración de la interfaz de usuario de Chakra
Después de instalar Chakra UI, debe hacer que esté disponible en su aplicación. Para hacer esto, debe configurar el ChakraProveedor componente.
El ChakraProveedor componente es un componente de nivel superior que proporciona la biblioteca de interfaz de usuario de Chakra. Envuelve toda la aplicación y proporciona el tema y el contexto de estilo a todos sus componentes.
Para configurar el ChakraProveedor componente, impórtelo desde @chakra-ui/reaccionar:
importar Reaccionar de'reaccionar'
importar ReactDOM de'reaccionar-dom/cliente'
importar aplicación de'./Aplicación'
importar { Proveedor de Chakras } de'@chakra-ui/reaccionar'
ReactDOM.createRoot(documento.getElementById('raíz') como Elemento HTML).render(
</ChakraProvider>
</React.StrictMode>
)
El ChakraProveedor componente admite un tema apuntalar. pasando el tema apoyo a la ChakraProveedor El componente garantiza que todos los componentes de la interfaz de usuario de Chakra en la aplicación puedan acceder al contexto de estilo y tema proporcionado. El tema el apoyo es opcional; si no lo pasa, Chakra UI usará un tema predeterminado.
Creación de una alerta personalizada mediante componentes de alerta
Chakra UI ofrece cuatro componentes que le permiten crear una alerta personalizada: Alerta, icono de alerta, AlertTitle, y Descripción de la alerta.
Para crear su mensaje de alerta, importe estos componentes de la biblioteca de la interfaz de usuario de Chakra y úselos de la siguiente manera:
importar Reaccionar de'reaccionar';
importar {Alerta, icono de alerta, descripción de alerta, título de alerta} de'@chakra-ui/reaccionar'funciónaplicación() {
devolver ('éxito'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription>
</Alert>
</div>
)
}
exportarpor defecto aplicación
Después de importar los componentes, el Alerta componente muestra un mensaje al usuario. Tiene un estado prop establecido en "éxito", lo que indica que el mensaje es un mensaje de éxito.
Hay otros tres estados: "información", "error" y "advertencia". El esquema de colores y el ícono que usa la alerta dependerán del estado del mensaje.
El Alerta El componente contiene tres hijos: icono de alerta, AlertTitle, y Descripción de la alerta. El icono de alerta componente muestra un pequeño icono junto al mensaje, AlertTitle muestra el mensaje principal y Descripción de la alerta muestra una descripción más detallada del mensaje.
El bloque de código anterior generará una alerta similar a esta:
Personalización de mensajes de alerta mediante Variant Prop
Para personalizar la apariencia del mensaje de alerta, use el variante apoyo de la Alerta componente. El variante prop define la apariencia visual del mensaje de alerta y determina el esquema de color, el icono y el peso de la fuente del mensaje en función del valor que le pasa.
El variante prop acepta varios valores de cadena como sutil, sólido, acento izquierdo, acento superior, acento derecho, y acento inferior. Cada valor representa un estilo visual diferente del mensaje de alerta.
Aquí hay un ejemplo de cuatro componentes de alerta con diferentes variantes:
importar Reaccionar de'reaccionar';
importar {Alerta, AlertIcon, AlertDescription, AlertTitle, Flex} de'@chakra-ui/reaccionar'funciónaplicación() {
devolver ('centro' brecha ='3' dirección='columna' mt='4'> 'éxito' variante='sólido'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription>
</Alert>
'éxito' variante='sutil'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription>
</Alert>
'éxito' variante='acento superior'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription>
</Alert>
'éxito' variante='acento izquierdo'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription>
</Alert>
</Flex>
</div>
)
}
exportarpor defecto aplicación
Al representar el bloque de código anterior, se mostrará una alerta personalizada como esta:
Personalización de sus mensajes de alerta utilizando la propiedad className
En lugar de apegarse a la apariencia predeterminada de los mensajes de alerta, puede personalizarlos usando el nombre de la clase apuntalar. usas el nombre de la clase prop para definir una clase CSS y aplicar su estilo personalizado al mensaje de alerta.
Por ejemplo:
importar Reaccionar de'reaccionar';
importar {Alerta, icono de alerta, descripción de alerta, título de alerta} de'@chakra-ui/reaccionar'funciónaplicación() {
devolver ('éxito' nombreclase='alerta'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription>
</Alert>
</div>
)
}
exportarpor defecto aplicación;
En este ejemplo, el componente de alerta tiene una "alerta" de clase CSS. Después de definir la clase CSS, puede definir sus estilos en su archivo CSS.
Al igual que:
.alerta {
color rojo;
familia de fuentes: cursiva;
pantalla: flexible;
dirección de flexión: columna;
brecha: 0.4movimiento rápido del ojo;
}
El código anterior aplicará los estilos CSS al componente de alerta. Si está familiarizado con los accesorios de estilo de la interfaz de usuario de Chakra, debe usarlos para diseñar mensajes de alerta en lugar de los nombre de la clase apuntalar.
Después de aplicar los estilos CSS anteriores, el componente de alerta se mostrará como se ve en la imagen a continuación:
Activación de mensajes de alerta en respuesta a eventos de usuario
Ha creado un componente de alerta que muestra constantemente un mensaje de alerta en la pantalla. Sin embargo, para mejorar la experiencia del usuario, puede activar el mensaje de alerta en respuesta a eventos específicos que inicia un usuario, usando detectores de eventos de JavaScript. Estos eventos pueden incluir hacer clic en un botón, enviar un formulario o encontrar un error.
Para activar su mensaje de alerta en respuesta a eventos, use React state y el mostrar accesorio de los componentes de la interfaz de usuario de Chakra.
Por ejemplo:
importar Reaccionar de'reaccionar';
importar {Alerta, icono de alerta, descripción de alerta, título de alerta, botón, botón de cierre} de'@chakra-ui/reaccionar'funciónaplicación() {
constante [display, setDisplay] = React.useState('ninguno');funciónnotificar() {
establecer pantalla ('doblar');
}funcióncerca() {
establecer pantalla ('ninguno');
}devolver (
"aplicación">'éxito' mostrar={mostrar} variante='sólido'> ¡¡¡Bienvenido!!!</AlertTitle> Es bueno tenerte aquí </AlertDescription> 'absoluto' arriba ='6px' derecha ='6px' onClick={cerrar}/>
</Alert>
exportarpor defecto aplicación
Este bloque de código administra el estado de la pantalla de notificación con el useState gancho. Establece el estado inicial de la visualización de notificaciones en "ninguno", lo que oculta la notificación.
Cuando el usuario hace clic en el Botón, llama a la notificar función. Llamar a la función de notificación cambia el valor de la mostrar estado de “ninguno” a “flex.”, haciendo que la notificación sea visible.
Cuando el usuario hace clic en el boton cerrar, llama a la función cerrar. Cambia el estado de la pantalla a "ninguno", lo que oculta la notificación.
Ahora puede crear alertas personalizables
Ahora ha aprendido a crear una alerta personalizada en su aplicación React utilizando la interfaz de usuario de Chakra. Con Chakra UI, crear alertas personalizadas en React es fácil e intuitivo, lo que nos permite brindar información clara y concisa a nuestros usuarios. Chakra UI proporciona muchos otros componentes de UI personalizables y accesibles para ayudarlo a crear excelentes aplicaciones React.
