Ako vytvoriť vlastný oznamovací komponent v React

V React je k dispozícii niekoľko balíkov tretích strán, ktoré vám môžu pomôcť vytvoriť komponent upozornení. Ak však chcete iba jednoduchý oznamovací komponent, možno budete chcieť vytvoriť svoj vlastný, aby ste sa vyhli pridávaniu zbytočných závislostí do vašej aplikácie.

Nastavenie projektu

Budeš použite Vite na nastavenie aplikácie React. Vite je nástroj na zostavovanie, ktorý vám umožňuje rýchlo zostaviť projekt React.

Ak chcete začať, použite správcu balíkov priadzí na vytvorenie nového projektu Vite spustením príkazu nižšie.

priadza vytvára vite

Príkaz vás vyzve na zadanie názvu projektu. Zadajte názov projektu a stlačte Enter. Ďalej vás vyzve na výber rámca. Vyberte si reagovať a stlačte Enter. Nakoniec vás požiada, aby ste vybrali variant, vyberte si JavaScript a potom stlačte Enter.

Tu sú konfigurácie, ktoré tento tutoriál použije:

Keď Vite vytvorí projekt, prejdite do priečinka projektu a otvorte ho pomocou editora kódu.

Potom môžete spustiť vývojový server spustením nasledujúceho príkazu.

priadza výv

Tým sa otvorí vaša nová aplikácia React vo vašom predvolenom prehliadači na adrese http://localhost: 5173/.

Navrhovanie oznamovacieho komponentu

Aby bolo možné vytvoriť flexibilný oznamovací komponent, musí byť schopný spracovať rôzne typy upozornení s rôznymi názvami, popismi a štýlmi. Napríklad potrebuje vykresliť upozornenie, úspešnosť a upozornenie na chybu.

Tu sú rôzne variácie, ktoré by mal byť komponent notifikácie schopný vykresliť.

Môžete to dosiahnuť odovzdaním rekvizít komponentu, ktorý špecifikuje typ oznámenia, ktoré sa má vykresliť, nadpis a text popisu. Pomocou týchto rekvizít môžete komponent prispôsobiť a znova ho použiť v celej aplikácii s minimálnym úsilím. Ak si potrebujete osviežiť rekvizity, tu je článok, ktorý to vysvetľuje ako používať rekvizity v Reacte.

Vytvorenie oznamovacieho komponentu

V src priečinok, vytvorte nový súbor s názvom Notification.jsx a pridajte nasledujúci kód.

exportpredvolenáfunkciuOznámenie({type, title, description}) {
vrátiť (


 {/* Obsah oznámenia */}
 </div>
 )
}

Tento kód vytvára funkčný komponent tzv Oznámenie s tromi rekvizitami: typu, titul, a popis. Tieto rekvizity použijete na prispôsobenie štýlu a obsahu upozornení.

Z dizajnu má komponent pár ikon, konkrétne informácie a ikonu krížika. Môžeš stiahnite si ikony na bezplatné použitie alebo použite ikonový komponent z balíka ako napr reakčné ikony. Tento tutoriál použije reakčné ikony nainštalujte ho spustením príkazu nižšie.

priadze pridať reakčné ikony

Potom importujte ikony v hornej časti Oznámenie komponent.

importovať { RxCross2, RxInfoCircled } od"react-icons/rx"

Teraz môžete upraviť komponent tak, aby používal ikony, názov a hodnoty popisu na vytvorenie obsahu upozornenia.

exportpredvolenáfunkciuOznámenie({type, title, description}) {
vrátiť (







{title}</div>
{description}</div>
 </div>
 </div>

 </div>
 )
}

Ďalším krokom je upraviť štýl v závislosti od odovzdaného typu.

Jeden prístup, ktorý môžete použiť, je definovať triedy CSS pre každý typ upozornenia, ktoré chcete zobraziť. Potom môžete podmienečne použiť príslušnú triedu na základe typu, ktorý je odovzdaný.

Ak chcete začať, vytvorte nový súbor s názvom notification.css a importovať ho do Notification.jsx pridaním nasledujúceho kódu na začiatok.

importovať "./notification.css"

Potom v notification.css definujte základné štýly pre komponent oznámení:

.oznámenie {
displej: flex;
flex-direction: riadok;
align-items: flexibilný štart;
vypchávka: 8px;
}
.notification__left {
displej: flex;
flex-direction: riadok;
vypchávka: 0px;
medzera: 8px;
okraj-pravý: 24px;
}
.notification__content {
displej: flex;
flex-direction: stĺpec;
align-items: flexibilný štart;
vypchávka: 0px;
}
.notification__title {
font-family: "Inter";
štýl písma: normálne;
font-weight: 500;
veľkosť písma: 14px;
}
.notification__description {
font-family: "Inter";
štýl písma: normálne;
font-weight: 400;
veľkosť písma: 12px;
vypchávka: 0;
}

Potom môžete definovať štýly pre rôzne typy upozornení pridaním nasledujúceho kódu do súboru CSS.

.notification__success {
pozadie: #f6fef9;
hranica: 1pxpevný#2f9461;
hraničný polomer: 8px;
}
.notification__error {
pozadie: #fffbfa;
hranica: 1pxpevný#cd3636;
hraničný polomer: 8px;
}
.notification__warning {
pozadie: #fffcf5;
hranica: 1pxpevný#c8811a;
hraničný polomer: 8px;
}

Vyššie uvedený kód upravuje štýl oznamovacieho kontajnera na základe odovzdaného typu.

Ak chcete prispôsobiť nadpis, použite nasledujúce štýly.

.notification__title__úspech {
farba: #2f9461;
}
.notification__title__warning {
farba: #c8811a;
}
.notification__title__error {
farba: #cd3636;
}

Pre vlastný text popisu použite tieto štýly.

.notification__description__úspech {
farba: #53b483;
}
.notification__description__warning {
farba: #e9a23b;
}
.notification__description__error {
farba: #f34141;
}

A pre ikony použite nasledujúce triedy.

.notification_icon_error {
farba: #cd3636;
}
.notification__icon__success {
farba: #2f9461;
}
.notification__icon__warning {
farba: #c8811a;
}

Potom v Oznámenie komponentu, môžete podmienečne použiť príslušnú triedu na základe typu rekvizita, takto:

exportpredvolenáfunkciuOznámenie({type, title, description}) {
vrátiť (
`upozornenie__${type}`}>
`notification__left`}>
`notification__icon__${type}`}/>
"notification__content">
`notification__title notification__title__${type}`}>{title}</div>
`notification__description notification__description__${type}`}>{description}</div>
 </div>
 </div>
`notification__icon__${type}`}/>
 </div>
 )
}

V tomto komponente dynamicky nastavujete triedu v závislosti od typu ako napr notifikácia__úspech alebo notifikácia__chyba.

Ak to chcete vidieť v akcii, importujte komponent Notification in App.jsx a použite ho nasledovne:

importovať Oznámenie od'./Notification'
funkciuApp() {
vrátiť (
 <>
 typ="úspech"
 titul="Úloha dokončená"
 popis ="Vaša úloha bola úspešne dokončená."
 />
 </>
 )
}
exportpredvolená App

Teraz môžete odovzdať iný typ Oznámenie komponent a vykreslí príslušné oznámenie, ktoré sa zhoduje so správou.

Je to nevyhnutné pre dobrú používateľskú skúsenosť, pretože používatelia si zvykli spájať rôzne farby a štýly s rôznymi scenármi a je dôležité tieto priradenia používať dôsledne. Bolo by napríklad mätúce dať používateľovi vedieť, že úspešne odovzdal fotografiu v červenom oznamovacom poli. Môžu si myslieť, že nahrávanie zlyhalo, aj keď bolo úspešné.

Pridanie interaktivity do oznamovacieho komponentu

Naučili ste sa, ako môžete použiť rekvizity na vytvorenie prispôsobiteľného komponentu upozornení. Aby ste to posunuli ešte ďalej, môžete do tohto komponentu pridať prechody, aby bol pútavejší. Môžete napríklad použiť animácie CSS na posunutie oznamovacieho komponentu na obrazovku a jeho vysunutie po uplynutí určitého času.