Twórz niestandardowe alerty w swojej aplikacji React za pomocą interfejsu użytkownika Chakra

Alerty to komunikaty wyświetlane na stronie internetowej/aplikacji internetowej w celu przekazania użytkownikowi ważnych informacji. Odgrywają kluczową rolę w aplikacjach internetowych. Istnieje wiele sposobów tworzenia alertów w React; Chakra UI sprawia, że ​​proces jest łatwy i wydajny.

Chakra UI to popularna biblioteka komponentów dla React, która zapewnia zestaw konfigurowalnych i dostępnych komponentów interfejsu użytkownika.

Instalowanie interfejsu użytkownika czakry

Aby skorzystać z biblioteki Chakra UI, jedna z wielu bibliotek komponentów reagujących, najpierw musisz go zainstalować. Możesz go zainstalować, uruchamiając następujące polecenie terminala w katalogu projektu node.js:

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

Alternatywnie możesz zainstalować interfejs Chakra za pomocą Yarn. Aby to zrobić, uruchom następujące polecenie:

przędza dodaj @chakra-ui/react @emotion/react @emotion/styled framer-motion

Konfigurowanie interfejsu użytkownika czakry

Po zainstalowaniu Chakra UI musisz udostępnić go w swojej aplikacji. Aby to zrobić, musisz skonfigurować plik Dostawca czakry część.

The Dostawca czakry komponent jest komponentem najwyższego poziomu, który zapewnia biblioteka Chakra UI. Obejmuje całą aplikację i zapewnia kontekst motywu i stylizacji dla wszystkich jej składników.

Aby skonfigurować Dostawca czakry komponent, zaimportuj go z @czakra-ui/reaguj:

import Reagować z'reagować'
import ReactDOM z„reaguj/klient”
import Aplikacja z„./Aplikacja”
import { Dostawca czakry } z'@interfejs użytkownika czakry/reaguj'
ReactDOM.createRoot(dokument.getElementById('źródło') Jak HTMLElement).render(



 </ChakraProvider>
 </React.StrictMode>
)

The Dostawca czakry komponent obsługuje a temat rekwizyt. Przechodząc temat podpora do Dostawca czakry zapewnia, że ​​wszystkie komponenty Chakra UI w aplikacji mają dostęp do podanego motywu i kontekstu stylizacji. The temat rekwizyt jest opcjonalny; jeśli go nie przejdziesz, interfejs użytkownika Chakra użyje domyślnego motywu.

Tworzenie alertu niestandardowego przy użyciu składników alertów

Chakra UI oferuje cztery komponenty, które umożliwiają utworzenie niestandardowego alertu: Alarm, ikona alertu, Tytuł alertu, I Opis alertu.

Aby utworzyć wiadomość ostrzegawczą, zaimportuj te komponenty z biblioteki Chakra UI i użyj ich w następujący sposób:

import Reagować z'reagować';
import {Alert, ikona alertu, opis alertu, tytuł alertu} z'@interfejs użytkownika czakry/reaguj'
funkcjonowaćAplikacja() {
powrót (



'powodzenie'>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
 </Alert>
 </div>
 )
}
eksportdomyślny Aplikacja

Po zaimportowaniu komponentów plik Alarm składnik wyświetla komunikat dla użytkownika. To ma status prop ustawiony na „success”, co wskazuje, że wiadomość jest wiadomością sukcesu.

Istnieją trzy inne statusy: „informacje”, „błąd” i „ostrzeżenie”. Schemat kolorów i ikona, których używa alert, zależą od stanu wiadomości.

The Alarm składnik zawiera troje dzieci: ikona alertu, Tytuł alertu, I Opis alertu. The ikona alertu składnik wyświetla małą ikonę obok wiadomości, Tytuł alertu wyświetla główną wiadomość i Opis alertu wyświetla bardziej szczegółowy opis komunikatu.

Poprzedni blok kodu wygeneruje alert, który wygląda tak:

Dostosowywanie komunikatów alertów za pomocą opcji Variant Prop

Aby dostosować wygląd komunikatu alertu, użyj pliku wariant podpora Alarm część. The wariant prop definiuje wizualny wygląd komunikatu alertu i określa schemat kolorów, ikonę i grubość czcionki komunikatu na podstawie wartości, którą mu przekazujesz.

The wariant prop akceptuje kilka wartości łańcuchowych, takich jak subtelny, solidny, lewy akcent, górny akcent, prawy akcent, I akcent dolny. Każda wartość reprezentuje inny styl wizualny komunikatu alertu.

Oto przykład czterech komponentów alertów z różnymi wariantami:

import Reagować z'reagować';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} z'@interfejs użytkownika czakry/reaguj'
funkcjonowaćAplikacja() {
powrót (



'Centrum' przerwa ='3' kierunek='kolumna' mt='4'>
'powodzenie' wariant='solidny'>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
 </Alert>

'powodzenie' wariant='subtelny'>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
 </Alert>
'powodzenie' wariant=„górny akcent”>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
 </Alert>
'powodzenie' wariant=„lewy akcent”>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
 </Alert>
 </Flex>
 </div>
 )
}
eksportdomyślny Aplikacja

Renderowanie powyższego bloku kodu spowoduje wyświetlenie niestandardowego alertu w następujący sposób:

Dostosowywanie komunikatów alertów za pomocą atrybutu className Prop

Zamiast trzymać się domyślnego wyglądu komunikatów ostrzegawczych, możesz dostosować go za pomocą Nazwa klasy rekwizyt. Używasz Nazwa klasy prop, aby zdefiniować klasę CSS i zastosować niestandardowy styl do komunikatu alertu.

Na przykład:

import Reagować z'reagować';
import {Alert, ikona alertu, opis alertu, tytuł alertu} z'@interfejs użytkownika czakry/reaguj'
funkcjonowaćAplikacja() {
powrót (



'powodzenie' nazwa klasy='alarm'>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
 </Alert>
 </div>
 )
}
eksportdomyślny Aplikacja;

W tym przykładzie komponent alertu ma klasę CSS „alert”. Po zdefiniowaniu klasy CSS możesz zdefiniować swoje style w pliku CSS.

jak tak:

.alarm {
 kolor czerwony;
 rodzina czcionek: kursywa;
 wyświetlacz: elastyczny;
 kierunek zginania: kolumna;
 luka: 0.4rem;
}

Powyższy kod zastosuje style CSS do komponentu alertu. Jeśli znasz rekwizyty w stylu Chakra UI, powinieneś używać ich do stylizowania komunikatów alertów zamiast rekwizytów Nazwa klasy rekwizyt.

Po zastosowaniu powyższych stylów CSS komponent alertu wyświetli się tak, jak pokazano na poniższym obrazku:

Wyzwalanie komunikatów alertów w odpowiedzi na zdarzenia użytkownika

Utworzono komponent alertu, który konsekwentnie wyświetla komunikat alertu na ekranie. Jednak w celu zwiększenia wygody użytkownika można wywołać komunikat ostrzegawczy w odpowiedzi na określone zdarzenia zainicjowane przez użytkownika, przy użyciu detektorów zdarzeń JavaScript. Zdarzenia te mogą obejmować kliknięcie przycisku, przesłanie formularza lub napotkanie błędu.

Aby wyzwolić komunikat alertu w odpowiedzi na zdarzenia, użyj React state i wyświetlacz rekwizyt komponentów interfejsu Chakra.

Na przykład:

import Reagować z'reagować';
import {Alert, ikona alertu, opis alertu, tytuł alertu, przycisk, przycisk zamknięcia} z'@interfejs użytkownika czakry/reaguj'
funkcjonowaćAplikacja() {
konst [display, setDisplay] = React.useState('nic');
funkcjonowaćnotyfikować() {
 ustawWyświetl('przewód');
 }
funkcjonowaćzamknąć() {
 ustawWyświetl('nic');
 }
powrót (

„aplikacja”>
'powodzenie' display={display} wariant='solidny'>

Witamy!!!</AlertTitle>
Miło Cię tu gościć </AlertDescription>
'absolutny' góra=„6 pikseli” prawo=„6 pikseli” onClick={zamknij}/>
 </Alert>

'4'>kliknij mnie</Button>
 </div>
 )
}
eksportdomyślny Aplikacja

Ten blok kodu zarządza stanem wyświetlania powiadomień za pomocą stan użycia hak. Ustawia początkowy stan wyświetlania powiadomień na „brak”, co powoduje ukrycie powiadomienia.

Gdy użytkownik kliknie Przycisk, nazywa się notyfikować funkcjonować. Wywołanie funkcji powiadamiania zmienia wartość wyświetlacz zmienić stan z „brak” na „flex.”, aby powiadomienie było widoczne.

Gdy użytkownik kliknie zamknijPrzycisk, wywołuje funkcję zamykającą. Zmienia stan wyświetlacza z powrotem na „brak”, co ukrywa powiadomienie.

Teraz możesz tworzyć konfigurowalne alerty

Teraz nauczyłeś się, jak utworzyć niestandardowy alert w aplikacji React za pomocą Chakra UI. Dzięki Chakra UI tworzenie niestandardowych alertów w React jest łatwe i intuicyjne, co pozwala nam dostarczać naszym użytkownikom jasne i zwięzłe informacje. Chakra UI zapewnia wiele innych konfigurowalnych i dostępnych komponentów interfejsu użytkownika, które pomogą Ci tworzyć wspaniałe aplikacje React.