Créez des alertes personnalisées dans votre application React avec Chakra UI

Les alertes sont des messages affichés sur un site web/une application web pour transmettre des informations importantes à un utilisateur. Elles jouent un rôle crucial dans les applications web. Il existe de nombreuses façons de créer des alertes dans React ; Chakra UI rend le processus facile et efficace.

Chakra UI est une bibliothèque de composants populaire pour React qui fournit un ensemble de composants d’interface utilisateur personnalisables et accessibles.

Installation de Chakra UI

Pour utiliser la bibliothèque Chakra UI, l’une des nombreuses bibliothèques de composants react, vous devez d’abord l’installer. Vous pouvez l’installer en exécutant la commande suivante dans le répertoire de votre projet node.js :

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

Vous pouvez également installer Chakra UI en utilisant Yarn. Pour ce faire, exécutez la commande suivante :

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

Configuration de Chakra UI

Après avoir installé Chakra UI, vous devez le rendre disponible dans votre application. Pour ce faire, vous devez configurer l’élément ChakraProvider composant.

Le ChakraProvider est un composant de haut niveau fourni par la bibliothèque Chakra UI. Il enveloppe l’ensemble de l’application et fournit le thème et le contexte stylistique à tous ses composants.

Pour configurer le composant ChakraProvider l’importer à partir de @chakra-ui/react:

 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>
)
 

Le ChakraProvider supporte un composant thème prop. Transmettre le thème accessoire au ChakraProvider garantit que tous les composants Chakra UI de l’application peuvent accéder au thème et au contexte de style fournis. Le composant thème prop est optionnel ; si vous ne le passez pas, Chakra UI utilisera un thème par défaut.

Création d’une alerte personnalisée à l’aide des composants d’alerte

Chakra UI propose quatre composants qui vous permettent de créer une alerte personnalisée : Alerte, AlertIcon, Titre de l’alerteet AlertDescription.

Pour créer votre message d’alerte, importez ces composants de la bibliothèque Chakra UI et utilisez-les comme suit :

 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
 

Après avoir importé les composants, l’élément Alerte affiche un message à l’intention de l’utilisateur. Il dispose d’un statut est défini sur « success », ce qui indique que le message est un message de succès.

Il existe trois autres statuts : « info », « erreur » et « avertissement ». Le schéma de couleurs et l’icône utilisés par l’alerte dépendent de l’état du message.

L’icône Alerte Le composant contient trois enfants : AlertIcon, Titre de l’alerteet AlertDescription. Les AlertIcon affiche une petite icône à côté du message, AlertTitle affiche le message principal, et AlertDescription affiche une description plus détaillée du message.

Le bloc de code précédent génère une alerte qui ressemble à ceci :

Personnalisation des messages d’alerte à l’aide de la Variant Prop

Pour personnaliser l’apparence du message d’alerte, utilisez l’option variante accessoire de l’article Alerte composant. Les variante prop définit l’aspect visuel du message d’alerte et détermine la palette de couleurs, l’icône et la police de caractères du message en fonction de la valeur qui lui est attribuée.

La propriété variante prop accepte plusieurs valeurs de chaîne telles que subtil, solide, accent gauche, top-accent, droit d’accèset bas-accent. Chaque valeur représente un style visuel différent du message d’alerte.

Voici un exemple de quatre composants d’alerte avec des variantes différentes :

 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
 

Le rendu du bloc de code ci-dessus affichera une alerte personnalisée comme celle-ci :

Personnalisation des messages d’alerte à l’aide de la propriété className

Plutôt que de conserver l’apparence par défaut des messages d’alerte, vous pouvez la personnaliser à l’aide de la propriété nomdeclasse prop. Vous utilisez la propriété nomdeclasse pour définir une classe CSS et appliquer votre style personnalisé au message d’alerte.

Par exemple :

 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;
 

Dans cet exemple, le composant d’alerte a une classe CSS « alerte ». Après avoir défini la classe CSS, vous pouvez définir vos styles dans votre fichier CSS.

Par exemple :

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

Le code ci-dessus appliquera les styles CSS au composant d’alerte. Si vous êtes familier avec les accessoires de style de Chakra UI, vous devriez les utiliser pour styliser les messages d’alerte au lieu de l’option nomdeclasse prop.

Après avoir appliqué les styles CSS ci-dessus, le composant d’alerte s’affichera comme le montre l’image ci-dessous :

Déclenchement de messages d’alerte en réponse à des événements utilisateur

Vous avez créé un composant d’alerte qui affiche systématiquement un message d’alerte à l’écran. Cependant, pour améliorer l’expérience de l’utilisateur, vous pouvez déclencher le message d’alerte en réponse à des événements spécifiques initiés par l’utilisateur, à l’aide d’écouteurs d’événements JavaScript.. Ces événements peuvent consister à cliquer sur un bouton, à soumettre un formulaire ou à rencontrer une erreur.

Pour déclencher votre message d’alerte en réponse à des événements, utilisez React state et la fonction affichage prop des composants de l’interface utilisateur Chakra.

Par exemple :

 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
 

Ce bloc de code gère l’état de l’affichage de la notification avec la fonction useState crochet. Il définit l’état initial de l’affichage de la notification à « none », ce qui masque la notification.

Lorsque l’utilisateur clique sur le bouton Bouton, il appelle le notifier . L’appel de la fonction notify modifie la valeur de l’élément affichage L’état de la notification passe de « none » à « flex. », ce qui rend la notification visible.

Lorsque l’utilisateur clique sur le bouton bouton de fermetureil appelle la fonction close. Elle ramène l’état de l’affichage à « none », ce qui masque la notification.

Vous pouvez désormais créer des alertes personnalisées

Vous avez maintenant appris à créer une alerte personnalisée dans votre application React à l’aide de Chakra UI. Avec Chakra UI, la création d’alertes personnalisées dans React est facile et intuitive, ce qui nous permet de fournir des informations claires et concises à nos utilisateurs. Chakra UI fournit de nombreux autres composants d’interface utilisateur personnalisables et accessibles pour vous aider à créer de superbes applications React.