Не е необходимо да разчитате на пакет на трета страна, за да създадете компонент за уведомяване. Ето как можете да го изградите сами.
В React има няколко пакета на трети страни, които могат да ви помогнат да създадете компонент за уведомяване. Ако обаче искате просто прост компонент за уведомяване, може да искате да създадете свой собствен, за да избегнете добавянето на ненужни зависимости към вашето приложение.
Настройка на проекта
Ти ще използвайте Vite, за да настроите приложението React. Vite е инструмент за изграждане, който ви позволява бързо да създадете скеле на React проект.
За да започнете, използвайте мениджъра на пакети за прежда, за да създадете нов проект на Vite, като изпълните командата по-долу.
прежда създават vite
Командата ще ви подкани да въведете име на проект. Въведете името на проекта и натиснете Enter. След това ще ви подкани да изберете рамка. Избирам реагират и натиснете Enter. Накрая ще ви помоли да изберете вариант, изберете JavaScript и след това натиснете Enter.
Ето конфигурациите, които този урок ще използва:
След като Vite създаде проекта, отидете до папката на проекта и го отворете с помощта на редактор на код.
След това можете да стартирате сървъра за разработка, като изпълните следната команда.
разработка на прежда
Това ще отвори вашето ново приложение React в браузъра ви по подразбиране на http://localhost: 5173/.
Проектиране на компонента за уведомяване
За да се създаде гъвкав компонент за уведомяване, той трябва да може да обработва различни типове уведомления с различни заглавия, описания и стилове. Например, трябва да изведе предупреждение, известие за успех и грешка.
Ето различни варианти, които компонентът за уведомяване трябва да може да рендира.
Можете да постигнете това чрез предаване на реквизити към компонента, който указва вида на известието за изобразяване, заглавието и текста на описанието. Като използвате тези подпори, можете да персонализирате компонента и да го използвате повторно във вашето приложение с минимални усилия. Ако имате нужда от опресняване на реквизита, ето статия, която обяснява как да използвате подпори в React.
Създаване на компонент за уведомяване
В src папка, създайте нов файл с име Notification.jsx и добавете следния код.
износпо подразбиранефункцияуведомление({тип, заглавие, описание}) {
връщане (
{/* Съдържание на известието */}
</div>
)
}
Този код създава функционален компонент, наречен уведомление с три опори: Тип, заглавие, и описание. Ще използвате тези подпори, за да персонализирате стила и съдържанието на известието.
От дизайна компонентът има няколко икони, а именно информация и икона с кръст. Можеш изтегляне на безплатни за използване икони или използвайте компонент на икона от пакет като икони за реакция. Този урок ще използва икони за реакция така че го инсталирайте, като изпълните командата по-долу.
yarn добавяне на икони за реакция
След това импортирайте иконите в горната част на уведомление компонент.
импортиране {RxCross2, RxInfoCircled} от"react-icons/rx"
Сега можете да промените компонента, за да използвате иконите, заглавието и стойностите на описанието, за да създадете съдържанието на известието.
износпо подразбиранефункцияуведомление({тип, заглавие, описание}) {
връщане (
{title}</div>
{описание}</div>
</div>
</div>
</div>
)
}
Следващата стъпка е да го стилизирате в зависимост от предадения тип.
Един подход, който можете да предприемете, е да дефинирате CSS класове за всеки тип известие, което искате да показвате. След това можете условно да приложите подходящия клас въз основа на типа, който е предаден.
За да започнете, създайте нов файл, наречен notification.css и го импортирайте Notification.jsx като добавите следния код в горната част.
импортиране на "./notification.css"
След това в notification.css дефинирайте базовите стилове за компонента за уведомяване:
.уведомление {
дисплей: flex;
flex-direction: ред;
подравняване на елементи: гъвкав старт;
подплата: 8px;
}
.notification__left {
дисплей: flex;
flex-direction: ред;
подплата: 0px;
празнина: 8px;
margin-right: 24px;
}
.notification__content {
дисплей: flex;
flex-direction: колона;
подравняване на елементи: гъвкав старт;
подплата: 0px;
}
.notification__title {
шрифтово семейство: "Интер";
стил на шрифта: нормално;
тегло на шрифта: 500;
размер на шрифта: 14px;
}
.notification__description {
шрифтово семейство: "Интер";
стил на шрифта: нормално;
тегло на шрифта: 400;
размер на шрифта: 12px;
подплата: 0;
}
След това можете да дефинирате стиловете за различните типове известия, като добавите следния код в CSS файла.
.notification__success {
заден план: #f6fef9;
граница: 1pxтвърдо#2f9461;
граница-радиус: 8px;
}
.notification__грешка {
заден план: #fffbfa;
граница: 1pxтвърдо#cd3636;
граница-радиус: 8px;
}
.notification__warning {
заден план: #fffcf5;
граница: 1pxтвърдо#c8811a;
граница-радиус: 8px;
}
Кодът по-горе стилизира контейнера за известия въз основа на предадения тип.
За да персонализирате заглавието, използвайте следните стилове.
.notification__title__success {
цвят: #2f9461;
}
.notification__title__warning {
цвят: #c8811a;
}
.notification__title__error {
цвят: #cd3636;
}
За текста на персонализираното описание използвайте тези стилове.
.notification__description__success {
цвят: #53b483;
}
.notification__description__warning {
цвят: #e9a23b;
}
.notification__description__грешка {
цвят: #f34141;
}
А за иконите използвайте следните класове.
.notification_icon_error {
цвят: #cd3636;
}
.notification__icon__success {
цвят: #2f9461;
}
.notification__icon__warning {
цвят: #c8811a;
}
След това, в уведомление компонент, можете условно да приложите подходящия клас въз основа на Тип опора, като това:
износпо подразбиранефункцияуведомление({тип, заглавие, описание}) {
връщане (
`уведомление за известие__${type}`}>
`известие__ляво`}>
`известие__икона__${type}`}/>
"уведомление__съдържание">
`известие__заглавие известие__заглавие__${type}`}>{title}</div>
`известие__описание уведомление__описание__${type}`}>{описание}</div>
</div>
</div>
`известие__икона__${type}`}/>
</div>
)
}
В този компонент вие динамично настройвате класа в зависимост от типа, като напр уведомление__успех или уведомление__грешка.
За да видите това в действие, импортирайте компонента Notification App.jsx и го използвайте, както следва:
импортиране уведомление от'./Уведомление'функцияПриложение() {
връщане (
<>
тип="успех"
заглавие=„Задачата е изпълнена“
описание=„Задачата ви е изпълнена успешно.“
/>
</>
)
}
износпо подразбиране Приложение
Сега можете да подадете различен тип към уведомление компонент и извежда подходящо известие, което съответства на съобщението.
Това е от съществено значение за доброто потребителско изживяване, тъй като потребителите са започнали да свързват различни цветове и стилове с различни сценарии и е важно тези асоциации да се използват последователно. Например би било объркващо да уведомите потребителя, че успешно е качил снимка в червено поле за известяване. Може да си помислят, че качването е неуспешно, дори и да е било успешно.
Добавяне на интерактивност към компонента за уведомяване
Научихте как можете да използвате подпори, за да създадете персонализиран компонент за уведомяване. За да стигнете още повече, можете да добавите преходи към този компонент, за да го направите по-ангажиращ. Например, можете да използвате CSS анимации, за да плъзнете компонента за известяване на екрана и да го плъзнете навън след изтичане на определен период от време.