Како креирати прилагођена упозорења у Реацт користећи Реацт-Тоастифи

Поруке упозорења се често користе у веб апликацијама за приказ упозорења, грешака, порука о успеху и других вредних информација.

Постоји неколико популарних пакета и оквира за прављење порука упозорења у Реацт-у. Реацт-Тоастифи је Реацт библиотека која вам омогућава да додате обавештења и поруке упозорења вашим апликацијама.

Инсталирање Реацт Тоастифи

Да бисте инсталирали Тоастифи у свој Реацт пројекат, покрените ову команду у директоријуму вашег пројекта:

нпм инсталл --саве реацт-тоастифи

Подешавање Тоастифи

Да бисте користили Тоастифи пакет, мораћете да увезете ТоастЦонтаинер, тост методу и пратећу ЦСС датотеку коју обезбеђује пакет.

Тхе ТоастЦонтаинер унутар компоненте апликације складишти сва направљена обавештења о тосту.

увоз { ТоастЦонтаинер, тост } из"реаговати-здравити";
увоз'реацт-тоастифи/дист/РеацтТоастифи.цсс';
функцијаАпликација() {
повратак(



 </div>
 );
}

Можете користити тост методе за креирање тост обавештења за ваш Реацт пројекат:

функцијаАпликација() {
конст нотифи = () => тоаст.суццесс("Поздрав!");
повратак(


Обавести</button>

 </div>
 );
}

Кликом на дугме које овај код генерише позваће здравица.успех метод, прослеђујући му "Здраво!" низ. Ово ће креирати обавештење о тосту које приказује поруку на екрану, овако:

Имајте на уму да постоје различите врсте метода тоста које можете позвати, као нпр тоаст.инфо(), тоаст.еррор(), тоаст.суццесс(), тоаст.варнинг(). Свака од ових метода има неки суптилни стил боја који одражава тип поруке.

Позиционирање обавештења о тосту

Подразумевано, обавештења о тосту искачу са горње десне стране екрана веб апликације. Ово можете променити тако што ћете поставити својство позиције на ТоастЦонтаинер. Доступно је шест вредности положаја: горњи десни, горњи центар, горњи леви, доњи десни, доњи центар и доњи леви.

На пример:

функцијаАпликација() {
конст нотифи = () => тоаст.суццесс("Поздрав!");
повратак(


Обавести</button>
"горе лево"/>
 </div>
 );
}

Подешавање положаја реквизита на ТоастЦонтаинер у горњем левом углу осигурава да се сва обавештења о тосту појављују са горње леве стране екрана.

Можете да промените подразумевану позицију за појединачна обавештења о тосту користећи пропс положаја тост методе:

функцијаАпликација() {
конст нотифи = () => тоаст.суццесс("Поздрав!", {положај: тост. ПОСИТИОН.ТОП_ЦЕНТЕР});
повратак(


Обавести</button>
"горе лево"/>
 </div>
 );
}

Такође можете позиционирати Тост обавештења користећи ЦСС својство позиције, али Тоастифи-ов позицијски пропс је стандардни начин да се то уради.

Руковање аутоЦлосе Проп методе Тоаст и ТоастЦонтаинер

Можете да промените време приказа обавештења о тосту. Можете да контролишете колико дуго обавештење о здрављу остаје отворено помоћу аутоЦлосе проп. Можете да промените време кашњења за сва обавештења о здравицама и појединачна обавештења о здравицама. Тхе аутоЦлосе проп прихвата само логичку вредност фалсе или трајање у милисекундама.

Да бисте променили време кашњења за сва обавештења о здрављу, користите аутоЦлосе проп унутар ТоастЦонтаинер елемент.

На пример:

функцијаАпликација() {
конст нотифи = () => тоаст.суццесс("Поздрав!");
повратак(


Обавести</button>
5000}/>
 </div>
 );
}

Уз горенаведена подешавања, сва обавештења о тосту ће се приказивати тачно пет секунди (5.000 милисекунди).

Помоћу аутоЦлосе својина сваког тост методом, можете прилагодити време кашњења за појединачна обавештења о здрављу.

На пример:

функцијаАпликација() {
конст нотифиОне = () => тоаст.инфо(„Затвориће се за 10 секунди“, {аутоЦлосе: 10000});
конст нотифиТво = () => тоаст.инфо(„Затвориће се за 15 секунди“, {аутоЦлосе: 15000});
повратак (


Обавести једног</button>
Обавести два</button>

 </div>
 );
}

Да бисте спречили да се обавештење о здрављу подразумевано затвори, можете да подесите аутоЦлосе проп то лажно. Можете осигурати да корисник мора ручно затворити свако обавештење о здрављу тако што ћете поставити аутоЦлосе проп оф тхе ТоастЦонтаинер на лажно.

На пример:

функцијаАпликација() {
конст нотифи = () => тоаст.инфо("Поздрав!");
повратак (


Обавести</button>
лажно} />
 </div>
 );
}

Подешавање аутоЦлосе ослонац појединца тост методе да лажно такође ће обезбедити да се та специфична обавештења о здрављу не затварају подразумевано.

Рендеровање обавештења без низа помоћу Тоастифи

Можете да прикажете низове, реаговане компоненте и бројеве као поруке обавештења када радите са обавештењима о тосту. Да бисте приказали Реацт компоненту као обавештење о здрављу, креирате компоненту и рендерујете је помоћу а тост методом.

На пример:

функцијаПорука({тоастПропс, цлосеТоаст}) {
повратак (


Добро дошли {тоастПропс.поситион}</p>
</button>
 </div>
 )
}
извозУобичајено Порука;

Овај блок кода ствара компоненту, Порука. Када се компонента приказује као обавештење, тост додаје тоастПропс и цлосеТоаст реквизите за вашу компоненту. Тхе цлосеТоаст проп је функција коју можете користити да затворите обавештење. Тхе тоастПропс проп је објекат са својствима која чувају детаље о обавештењу о здрављу укључујући његову позицију, тип и друге карактеристике.

Увезите компоненту Порука, а затим је проследите функцији тоаст(), приказујући је као обавештење о здрављу:

увоз { ТоастЦонтаинер, тост } из"реаговати-здравити";
увоз'реацт-тоастифи/дист/РеацтТоастифи.цсс';
увоз Порука из"./цомпонентс/Мессаге";
функцијаАпликација() {
конст мсг = () => тост (<Порука />);
повратак (


Добродошли</button>

 </div>
 );
}

Кликом на дугме ће се на екрану приказати обавештење које садржи питање и два дугмета.

Стилинг Тоаст Нотифицатионс

Не морате да користите подразумевани стил за обавештења о здрављу. Можете их прилагодити тако да одговарају жељеној теми дизајна или узорку који одговара вашој веб апликацији.

Да бисте стилизовали обавештење о тосту, дајте му а Назив класе и применити прилагођавања унутар ЦСС датотеке.

На пример:

функцијаАпликација() {
конст нотифи = () => тоаст.суццесс("Поздрав!", {Назив класе: "здравица-порука"});
повратак (


Обавести</button>
"топ-центар" />
 </div>
 );
}

Са Назив класе у прилогу вашег обавештења, можете да стилизујете обавештење о тосту према вашим жељама унутар ЦСС датотеке:

.здравица-порука {
боја позадине: #000000;
боја: #ФФФФФФ;
фонт-сизе: 20пк;
паддинг: 1рем 0.5рем;
}

Као резултат горе наведеног прилагођеног стила, обавештење ће изгледати овако:

Тост обавештења за вашу веб апликацију

Сада можете креирати прилагођена упозорења у Реацт-у користећи Реацт-Тоастифи пакет и његове доступне методе. Стилизирањем ових прилагођених упозорења/обавештења према вашим жељама, можете побољшати корисничко искуство ваше веб апликације.

Реацт-Тоастифи нуди брз и ефикасан метод за укључивање прилагођених упозорења у ваш Реацт пројекат без муке.