Come creare avvisi nella tua app React con l’interfaccia Chakra

Gli avvisi sono messaggi visualizzati su un sito Web/applicazione Web per trasmettere informazioni importanti a un utente. Svolgono un ruolo cruciale nelle applicazioni web. Esistono molti modi per creare avvisi in React; Chakra UI rende il processo semplice ed efficiente.

Chakra UI è una popolare libreria di componenti per React che fornisce una serie di componenti dell’interfaccia utente personalizzabili e accessibili.

Installazione dell’interfaccia utente di Chakra

Per utilizzare la libreria Chakra UI, una delle tante librerie di componenti di reazione, devi prima installarla. Puoi installarlo eseguendo il seguente comando da terminale nella directory del tuo progetto node.js:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

In alternativa, puoi installare l’interfaccia utente di Chakra usando Yarn. Per fare ciò, esegui il seguente comando:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Impostazione dell’interfaccia utente di Chakra

Dopo aver installato Chakra UI, devi renderlo disponibile nella tua applicazione. Per fare ciò, è necessario configurare il Fornitore di Chakra componente.

IL Fornitore di Chakra componente è un componente di livello superiore fornito dalla libreria dell’interfaccia utente di Chakra. Comprende l’intera applicazione e fornisce il tema e il contesto stilistico a tutti i suoi componenti.

Per impostare il Fornitore di Chakra componente, importarlo da @chakra-ui/reagire:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.createRoot(document.getElementById(‘root’) as HTMLElement).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
)

IL Fornitore di Chakra il componente supporta a tema puntello. Passando il tema prop al Fornitore di Chakra assicura che tutti i componenti dell’interfaccia utente di Chakra nell’applicazione possano accedere al tema fornito e al contesto di stile. IL tema prop è facoltativo; se non lo superi, l’interfaccia utente di Chakra utilizzerà un tema predefinito.

Creazione di un avviso personalizzato utilizzando componenti di avviso

L’interfaccia utente di Chakra offre quattro componenti che ti consentono di creare un avviso personalizzato: Mettere in guardia, Icona avviso, AlertTitoloE AlertDescription.

Per creare il tuo messaggio di avviso, importa questi componenti dalla libreria dell’interfaccia utente di Chakra e utilizzali come segue:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'

function App() {
return (
<div>
<Alert status=’success’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}

export default App

Dopo aver importato i componenti, il file Mettere in guardia componente visualizza un messaggio per l’utente. Ha un stato prop impostato su “success”, che indica che il messaggio è un messaggio di successo.

Ci sono altri tre stati: “info”, “errore” e “avviso”. La combinazione di colori e l’icona utilizzati dall’avviso dipendono dallo stato del messaggio.

IL Mettere in guardia componente contiene tre figli: Icona avviso, AlertTitoloE AlertDescription. IL Icona avviso componente visualizza una piccola icona accanto al messaggio, AlertTitolo visualizza il messaggio principale e AlertDescription visualizza una descrizione più dettagliata del messaggio.

Il blocco di codice precedente genererà un avviso simile al seguente:

Personalizzazione dei messaggi di avviso utilizzando la variante Prop

Per personalizzare l’aspetto del messaggio di avviso, utilizzare il variante puntello del Mettere in guardia componente. IL variante prop definisce l’aspetto visivo del messaggio di avviso e determina la combinazione di colori, l’icona e lo spessore del carattere del messaggio in base al valore che gli si passa.

IL variante prop accetta diversi valori di stringa come impercettibile, solido, accento sinistro, accento superiore, accento destroE accento inferiore. Ogni valore rappresenta uno stile di visualizzazione diverso del messaggio di avviso.

Ecco un esempio di quattro componenti di avviso con diverse varianti:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'

function App() {
return (
<div>
<Flex justify=’center’ gap=’3′ direction=’column’ mt=’4′>
<Alert status=’success’ variant=’solid’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>

<Alert status=’success’ variant=’subtle’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>

<Alert status=’success’ variant=’top-accent’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>

<Alert status=’success’ variant=’left-accent’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</Flex>
</div>
)
}

export default App

Il rendering del blocco di codice sopra mostrerà un avviso personalizzato come questo:

Personalizzazione dei messaggi di avviso utilizzando la proprietà className

Anziché attenersi all’aspetto predefinito dei messaggi di avviso, è possibile personalizzarlo utilizzando il file nome della classe puntello. Tu usi il nome della classe prop per definire una classe CSS e applicare il tuo stile personalizzato al messaggio di avviso.

Per esempio:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'

function App() {
return (
<div>
<Alert status=’success’ className=’alert’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}

export default App;

In questo esempio, il componente alert ha una classe CSS “alert”. Dopo aver definito la classe CSS, puoi definire i tuoi stili nel tuo file CSS.

Così:

.alert {
  color: red;
  font-family: cursive;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

Il codice sopra applicherà gli stili CSS al componente di avviso. Se hai familiarità con gli oggetti di scena in stile Chakra UI, dovresti usarli per modellare i messaggi di avviso invece del nome della classe puntello.

Dopo aver applicato gli stili CSS sopra, il componente di avviso verrà visualizzato come mostrato nell’immagine seguente:

Attivazione di messaggi di avviso in risposta a eventi utente

Hai creato un componente di avviso che visualizza costantemente un messaggio di avviso sullo schermo. Tuttavia, per migliorare l’esperienza dell’utente, puoi attivare il messaggio di avviso in risposta a eventi specifici avviati da un utente, utilizzando i listener di eventi JavaScript. Questi eventi potrebbero includere il clic su un pulsante, l’invio di un modulo o il verificarsi di un errore.

Per attivare il messaggio di avviso in risposta agli eventi, utilizzare React state e the Schermo prop dei componenti dell’interfaccia utente di Chakra.

Per esempio:

import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} from '@chakra-ui/react'

function App() {
const (display, setDisplay) = React.useState(‘none’);

function notify() {
setDisplay(‘flex’);
}

function close() {
setDisplay(‘none’);
}

return (
<div className=”app”>
<Alert status=’success’ display={display} variant=’solid’>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
<CloseButton position=’absolute’ top=’6px’ right=’6px’ onClick={close}/>
</Alert>

<Button onClick={notify} mt=’4′>Click Me</Button>
</div>
)
}

export default App

Questo blocco di codice gestisce lo stato della visualizzazione delle notifiche con il useState gancio. Imposta lo stato iniziale della visualizzazione delle notifiche su “nessuno”, che nasconde la notifica.

Quando l’utente fa clic sul Pulsantechiama il notificare funzione. La chiamata alla funzione di notifica cambia il valore di Schermo stato da “none” a “flex.”, rendendo visibile la notifica.

Quando l’utente fa clic sul closeButton, chiama la funzione di chiusura. Cambia lo stato del display in “nessuno” che nasconde la notifica.

Ora puoi creare avvisi personalizzabili

Ora hai imparato come creare un avviso personalizzato nella tua applicazione React utilizzando l’interfaccia utente di Chakra. Con Chakra UI, creare avvisi personalizzati in React è facile e intuitivo, permettendoci di fornire informazioni chiare e concise ai nostri utenti. L’interfaccia utente di Chakra fornisce molti altri componenti dell’interfaccia utente personalizzabili e accessibili per aiutarti a creare fantastiche applicazioni React.