Få konsistente, attraktive varsler på tvers av React-nettstedet ditt med dette biblioteket.
Varsler er meldinger som vises på en nettside/nettapplikasjon for å formidle viktig informasjon til en bruker. De spiller en avgjørende rolle i webapplikasjoner. Det er mange måter å lage varsler på i React; Chakra UI gjør prosessen enkel og effektiv.
Chakra UI er et populært komponentbibliotek for React som gir et sett med tilpassbare og tilgjengelige UI-komponenter.
Installere Chakra UI
For å bruke Chakra UI-biblioteket, ett av mange react komponent biblioteker, må du først installere den. Du kan installere den ved å kjøre følgende terminalkommando i node.js-prosjektets katalog:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativt kan du installere Chakra UI ved å bruke Yarn. For å gjøre det, kjør følgende kommando:
garn legg til @chakra-ui/react @emotion/react @emotion/styled framer-motion
Sette opp Chakra UI
Etter å ha installert Chakra UI, må du gjøre det tilgjengelig i applikasjonen din. For å gjøre dette må du sette opp ChakraProvider komponent.
De ChakraProvider komponent er en toppnivåkomponent som Chakra UI-biblioteket tilbyr. Den pakker inn hele applikasjonen og gir temaet og stylingkonteksten til alle komponentene.
For å sette opp ChakraProvider komponent, importer den fra @chakra-ui/reager:
import Reagere fra'reagere'
import ReactDOM fra'reager-dom/klient'
import App fra'./App'
import { ChakraProvider } fra'@chakra-ui/react'
ReactDOM.createRoot(dokument.getElementById('rot') som HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
De ChakraProvider komponent støtter en tema rekvisitt. Passerer tema støtte til ChakraProvider komponent sikrer at alle Chakra UI-komponenter i applikasjonen har tilgang til det angitte temaet og stylingkonteksten. De tema rekvisitt er valgfritt; hvis du ikke består det, vil Chakra UI bruke et standardtema.
Opprette et tilpasset varsel ved hjelp av varselkomponenter
Chakra UI tilbyr fire komponenter som lar deg lage et tilpasset varsel: Varsling, AlertIcon, AlertTitle, og AlertDescription.
For å lage varselmeldingen, importer disse komponentene fra Chakra UI-biblioteket og bruk dem som følger:
import Reagere fra'reagere';
import {Alert, AlertIcon, AlertDescription, AlertTitle} fra'@chakra-ui/react'funksjonApp() {
komme tilbake ('suksess'> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription>
</Alert>
</div>
)
}
eksportmisligholde App
Etter å ha importert komponentene, Varsling komponent viser en melding til brukeren. Den har en status prop satt til "suksess", som indikerer at meldingen er en suksessmelding.
Det er tre andre statuser: «info», «feil» og «advarsel». Fargeskjemaet og ikonet som varselet bruker vil avhenge av meldingsstatusen.
De Varsling komponenten inneholder tre barn: AlertIcon, AlertTitle, og AlertDescription. De AlertIcon komponent viser et lite ikon ved siden av meldingen, AlertTitle viser hovedmeldingen, og AlertDescription viser en mer detaljert beskrivelse av meldingen.
Den forrige kodeblokken vil generere et varsel som ser slik ut:
Tilpasse varselmeldinger ved å bruke Variant Prop
For å tilpasse utseendet til varselmeldingen, bruk variant rekvisitt av Varsling komponent. De variant prop definerer det visuelle utseendet til varselmeldingen og bestemmer fargeskjemaet, ikonet og skriftvekten til meldingen basert på verdien du sender til den.
De variant prop godtar flere strengverdier som f.eks subtile, fast, venstre-aksent, topp-aksent, høyre-aksent, og bunn-aksent. Hver verdi representerer en annen visuell stil for varselmeldingen.
Her er et eksempel på fire varslingskomponenter med forskjellige varianter:
import Reagere fra'reagere';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} fra'@chakra-ui/react'funksjonApp() {
komme tilbake ('senter' gap='3' retning='kolonne' mt='4'> 'suksess' variant='fast'> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription>
</Alert>
'suksess' variant="subtil"> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription>
</Alert>
'suksess' variant="topp aksent"> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription>
</Alert>
'suksess' variant='venstre-aksent'> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription>
</Alert>
</Flex>
</div>
)
}
eksportmisligholde App
Å gjengi kodeblokken ovenfor vil vise et tilpasset varsel som dette:
Tilpasse varselmeldingene dine ved å bruke klassenavn Prop
I stedet for å holde deg til standardutseendet til varselmeldingene, kan du tilpasse det ved å bruke klassenavn rekvisitt. Du bruker klassenavn prop for å definere en CSS-klasse og bruke din egendefinerte stil på varselmeldingen.
For eksempel:
import Reagere fra'reagere';
import {Alert, AlertIcon, AlertDescription, AlertTitle} fra'@chakra-ui/react'funksjonApp() {
komme tilbake ('suksess' klassenavn='varsling'> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription>
</Alert>
</div>
)
}
eksportmisligholde App;
I dette eksemplet har varslingskomponenten en CSS-klasse "alert". Etter å ha definert CSS-klassen, kan du definere stilene dine i CSS-filen.
Som så:
.varsling {
fargen rød;
font-familie: kursiv;
display: flex;
flex-retning: kolonne;
mellomrom: 0.4rem;
}
Koden ovenfor vil bruke CSS-stilene på varslingskomponenten. Hvis du er kjent med rekvisitter i Chakra UI-stil, bør du bruke dem til å style varselmeldinger i stedet for klassenavn rekvisitt.
Etter å ha brukt CSS-stilene ovenfor, vil varslingskomponenten vises som vist på bildet nedenfor:
Utløser varselmeldinger som svar på brukerhendelser
Du har opprettet en varselkomponent som konsekvent viser en varselmelding på skjermen. For å forbedre brukeropplevelsen kan du imidlertid utløse varselmeldingen som svar på spesifikke hendelser en bruker starter, ved hjelp av JavaScript-hendelseslyttere. Disse hendelsene kan omfatte å klikke på en knapp, sende inn et skjema eller støte på en feil.
For å utløse varselmeldingen som svar på hendelser, bruk React state og vise prop av Chakra UI-komponentene.
For eksempel:
import Reagere fra'reagere';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} fra'@chakra-ui/react'funksjonApp() {
konst [display, setDisplay] = React.useState('ingen');funksjongi beskjed() {
setDisplay('fleks');
}funksjonLukk() {
setDisplay('ingen');
}komme tilbake (
"app">'suksess' display={display} variant='fast'> Velkommen!!!</AlertTitle> Det er hyggelig å ha deg her</AlertDescription> "absolutt" topp='6px' høyre='6px' onClick={close}/>
</Alert>
eksportmisligholde App
Denne kodeblokken administrerer tilstanden til varslingsvisningen med useState krok. Den setter starttilstanden til varslingsvisningen til "ingen", som skjuler varselet.
Når brukeren klikker på Knapp, kaller det gi beskjed funksjon. Å ringe varslingsfunksjonen endrer verdien av vise tilstand fra "ingen" til "fleks", noe som gjør varselet synlig.
Når brukeren klikker på close-knappen, kaller den lukkefunksjonen. Den endrer tilstanden til skjermen tilbake til "ingen" som skjuler varselet.
Nå kan du lage tilpassbare varsler
Nå har du lært hvordan du oppretter et tilpasset varsel i React-applikasjonen din ved å bruke Chakra UI. Med Chakra UI er det enkelt og intuitivt å lage tilpassede varsler i React, noe som lar oss gi klar og konsis informasjon til brukerne våre. Chakra UI gir mange andre tilpassbare og tilgjengelige UI-komponenter for å hjelpe deg med å bygge flotte React-applikasjoner.