Как да създадете персонализирани сигнали в React с помощта на React-Toastify

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

Има няколко популярни пакета и рамки за създаване на предупредителни съобщения в React. React-Toastify е React библиотека, която ви позволява да добавяте известия и предупредителни съобщения към вашите приложения.

Инсталиране на React Toastify

За да инсталирате Toastify във вашия проект React, изпълнете тази команда в директорията на вашия проект:

npm install --save react-toastify

Настройване на Toastify

За да използвате пакета Toastify, ще трябва да импортирате Контейнер за тост, препечен хляб метод и придружаващ CSS файл, предоставен от пакета.

The Контейнер за тост вътре в компонента на приложението съхранява всички създадени тост известия.

импортиране {Тостконтейнер, тост} от"реагиране-препичане";
импортиране'react-toastify/dist/ReactToastify.css';





instagram viewer
функцияПриложение() {
връщане(



 </div>
 );
}

Можете да използвате препечен хляб методи за създаване на тост известия за вашия проект React:

функцияПриложение() {
конст уведомявам = () => тост.успех("Здравей!");
връщане(


Известяване</button>

 </div>
 );
}

Щракването върху бутона, генериран от този код, ще извика тост.успех метод, предавайки му "Hello There!" низ. Това ще създаде тост известие, което показва съобщението на екрана, като това:

Имайте предвид, че има различни видове методи за тост, които можете да извикате, като напр toast.info(), toast.error(), toast.success(), toast.warning(). Всеки от тези методи има някакъв фин цветови стил, за да отрази типа на съобщението.

Позициониране на вашите известия за тост

По подразбиране известията за тост изскачат от горната дясна страна на екрана на уеб приложението. Можете да промените това, като зададете свойството position на Контейнер за тост. Има шест налични стойности на позиция: горе вдясно, горе в центъра, горе вляво, долу вдясно, долу в центъра и долу вляво.

Например:

функцияПриложение() {
конст уведомявам = () => тост.успех("Здравей!");
връщане(


Известяване</button>
"горе вляво"/>
 </div>
 );
}

Задаване на опората за позиция на Контейнер за тост в горния ляв ъгъл гарантира, че всички известия за тост изскачат от горната лява страна на екрана.

Можете да промените позицията по подразбиране за отделни тост известия, като използвате позицията на позицията на препечен хляб методи:

функцияПриложение() {
конст уведомявам = () => тост.успех("Здравей!", {позиция: тост. POSITION.TOP_CENTER});
връщане(


Известяване</button>
"горе вляво"/>
 </div>
 );
}

Можете също така да позиционирате Toast известия използвайки свойството CSS position, но позицията на Toastify е стандартният начин да направите това.

Работа с функцията за автоматично затваряне на метода Toast и ToastContainer

Можете да промените времето за показване на тост известия. Можете да контролирате колко дълго тост известието остава отворено, като използвате автоматично затваряне опора Можете да промените времето на забавяне за всички тост известия и отделни специфични тост известия. The автоматично затваряне prop приема само булевата стойност false или продължителност в милисекунди.

За да промените времето на забавяне за всички тост известия, използвайте автоматично затваряне опора в рамките на Контейнер за тост елемент.

Например:

функцияПриложение() {
конст уведомявам = () => тост.успех("Здравей!");
връщане(


Известяване</button>
5000}/>
 </div>
 );
}

С горните настройки всички тост известия ще се показват точно за пет секунди (5000 милисекунди).

Използвайки автоматично затваряне собственост на всеки препечен хляб метод, можете да персонализирате времето на забавяне за отделни тост известия.

Например:

функцияПриложение() {
конст notifyOne = () => toast.info(„Ще се затвори след 10 секунди“, {автоматично затваряне: 10000});
конст notifyTwo = () => toast.info(„Ще се затвори след 15 секунди“, {автоматично затваряне: 15000});
връщане (


Уведомете един</button>
Уведомете две</button>

 </div>
 );
}

За да предотвратите затварянето на тост известието по подразбиране, можете да зададете автоматично затваряне опора на невярно. Можете да гарантирате, че потребителят трябва ръчно да затваря всяко тост известие, като зададете автоматично затваряне опора на Контейнер за тост до невярно.

Например:

функцияПриложение() {
конст уведомявам = () => toast.info("Здравей!");
връщане (


Известяване</button>
невярно} />
 </div>
 );
}

Настройка на автоматично затваряне опора на индивид препечен хляб методи за невярно също така ще гарантира, че тези конкретни тост известия не се затварят по подразбиране.

Изобразяване на известия без низове с Toastify

Можете да изобразявате низове, реагиращи компоненти и числа като уведомителни съобщения, когато работите с тост известия. За да изобразите компонент на React като тост известие, създавате компонента и го изобразявате с помощта на a препечен хляб метод.

Например:

функцияСъобщение({toastProps, closeToast}) {
връщане (


Добре дошли {toastProps.position}</p>
</button>
 </div>
 )
}
износпо подразбиране съобщение;

Този кодов блок създава компонент, Съобщение. При изобразяване на компонент като известие, тост добавя toastProps и closeToast подпори към вашия компонент. The closeToast prop е функция, която можете да използвате, за да затворите известието. The toastProps prop е обект със свойства, които съхраняват подробности за тост известието, включително неговата позиция, тип и други характеристики.

Импортирайте компонента Message, след което го предайте на функцията toast(), изобразявайки го като тост известие:

импортиране {Тостконтейнер, тост} от"реагиране-препичане";
импортиране'react-toastify/dist/ReactToastify.css';
импортиране Съобщение от"./components/Message";
функцияПриложение() {
конст msg = () => тост(<Съобщение />);
връщане (


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

 </div>
 );
}

Щракването върху бутона ще доведе до показване на известие, съдържащо въпрос и два бутона на екрана.

Оформяне на тост известия

Не е необходимо да използвате стила по подразбиране за вашите тост известия. Можете да ги персонализирате, за да отговарят на желана дизайнерска тема или модел, подходящ за вашето уеб приложение.

За да оформите известието си за тост, дайте му a className и приложете персонализациите в CSS файл.

Например:

функцияПриложение() {
конст уведомявам = () => тост.успех("Здравей!", {className: "тост-съобщение"});
връщане (


Известяване</button>
"горе в центъра" />
 </div>
 );
}

С className прикачен към вашето известие, можете да стилизирате тост известието според вашите предпочитания в CSS файла:

.toast-съобщение {
Цвят на фона: #000000;
цвят: #FFFFFF;
размер на шрифта: 20px;
подплата: 1рем 0.5rem;
}

В резултат на горния персонализиран стил, известието ще изглежда така:

Тост известия за вашето уеб приложение

Вече можете да създавате персонализирани сигнали в React, като използвате пакета React-Toastify и неговите налични методи. Като оформите тези персонализирани предупреждения/известия според вашите предпочитания, можете да подобрите потребителското изживяване на вашето уеб приложение.

React-Toastify предлага бърз и ефективен метод за включване на персонализирани предупреждения във вашия React проект без суетене.