Вам не нужно полагаться на сторонний пакет для создания компонента уведомления. Вот как вы можете построить его самостоятельно.

В React доступно несколько сторонних пакетов, которые могут помочь вам создать компонент уведомления. Однако, если вам просто нужен простой компонент уведомления, вы можете создать свой собственный, чтобы избежать добавления ненужных зависимостей в ваше приложение.

Настройка проекта

Вы будете используйте Vite для настройки приложения React. Vite — это инструмент сборки, который позволяет быстро создать проект React.

Для начала используйте менеджер пакетов пряжи, чтобы создать новый проект Vite, выполнив приведенную ниже команду.

пряжа создать вите

Команда предложит вам ввести имя проекта. Введите название проекта и нажмите Enter. Далее вам будет предложено выбрать фреймворк. Выбирать реагировать и нажмите Enter. Наконец, он попросит вас выбрать вариант, выберите JavaScript а затем нажмите Enter.

Вот конфигурации, которые будут использоваться в этом руководстве:

После того, как Vite создаст проект, перейдите в папку проекта и откройте его с помощью редактора кода.

instagram viewer

Затем вы можете запустить сервер разработки, выполнив следующую команду.

пряжа разработчик

Это откроет ваше новое приложение React в браузере по умолчанию в http://localhost: 5173/.

Разработка компонента уведомления

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

Вот различные варианты, которые должен отображать компонент уведомления.

Этого можно добиться, передав реквизиты компоненту, который указывает тип отображаемого уведомления, заголовок и текст описания. Используя эти реквизиты, вы можете настроить компонент и повторно использовать его в своем приложении с минимальными усилиями. Если вам нужно освежить в памяти реквизит, вот статья, которая объясняет как использовать реквизит в React.

Создание компонента уведомления

в источник папку, создайте новый файл с именем Уведомление.jsx и добавьте следующий код.

экспортпо умолчаниюфункцияУведомление({тип, название, описание}) {
возвращаться (


 {/* Содержание уведомления */}
 </div>
 )
}

Этот код создает функциональный компонент с именем Уведомление с тремя реквизитами: тип, заголовок, и описание. Вы будете использовать эти реквизиты для настройки стиля и содержимого уведомления.

Из дизайна у компонента есть пара иконок, а именно информация, и иконка крестика. Ты можешь скачать бесплатные иконки или используйте компонент значка из пакета, такого как иконки реакции. Этот учебник будет использовать иконки реакции поэтому установите его, выполнив команду ниже.

пряжа добавить значки реакции

Затем импортируйте значки в верхней части Уведомление компонент.

Импортировать {RxCross2, RxInfoCircled} от"реагировать-значки/RX"

Теперь вы можете изменить компонент, чтобы использовать значки, заголовок и значения свойств описания для создания содержимого уведомления.

экспортпо умолчаниюфункцияУведомление({тип, название, описание}) {
возвращаться (







{название}</div>
{описание}</div>
 </div>
 </div>

 </div>
 )
}

Следующим шагом является стилизация в зависимости от переданного типа.

Один из подходов, который вы можете использовать, — определить классы CSS для каждого типа уведомлений, которые вы хотите отобразить. Затем вы можете условно применить соответствующий класс на основе переданного типа.

Для начала создайте новый файл с именем уведомление.css и импортировать его в Уведомление.jsx добавив следующий код вверху.

импортировать "./notification.css"

Затем в уведомление.css определить базовые стили для компонента уведомления:

.уведомление {
отображать: сгибаться;
flex-направление: ряд;
выравнивание элементов: гибкий старт;
набивка: 8пикс.;
}
.notification__left {
отображать: сгибаться;
flex-направление: ряд;
набивка: 0пикс.;
зазор: 8пикс.;
край справа: 24пикс.;
}
.notification__content {
отображать: сгибаться;
flex-направление: столбец;
выравнивание элементов: гибкий старт;
набивка: 0пикс.;
}
.notification__title {
семейство шрифтов: "Интер";
стиль шрифта: нормальный;
вес шрифта: 500;
размер шрифта: 14пикс.;
}
.notification__description {
семейство шрифтов: "Интер";
стиль шрифта: нормальный;
вес шрифта: 400;
размер шрифта: 12пикс.;
набивка: 0;
}

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

.notification__success {
фон: #f6fef9;
граница: 1пикс.твердый#2f9461;
радиус границы: 8пикс.;
}
.notification__error {
фон: #fffbfa;
граница: 1пикс.твердый#cd3636;
радиус границы: 8пикс.;
}
.notification__warning {
фон: #fffcf5;
граница: 1пикс.твердый#c8811a;
радиус границы: 8пикс.;
}

Приведенный выше код стилизует контейнер уведомлений в зависимости от переданного типа.

Чтобы настроить заголовок, используйте следующие стили.

.notification__title__success {
цвет: #2f9461;
}
.notification__title__предупреждение {
цвет: #c8811a;
}
.notification__title__error {
цвет: #cd3636;
}

Для пользовательского текста описания используйте эти стили.

.notification__description__success {
цвет: #53b483;
}
.notification__description__warning {
цвет: #e9a23b;
}
.notification__description__error {
цвет: #f34141;
}

А для иконок используйте следующие классы.

.notification_icon_error {
цвет: #cd3636;
}
.notification__icon__success {
цвет: #2f9461;
}
.notification__icon__warning {
цвет: #c8811a;
}

Затем, в Уведомление компонент, вы можете условно применить соответствующий класс на основе тип опора, вот так:

экспортпо умолчаниюфункцияУведомление({тип, название, описание}) {
возвращаться (
`уведомление уведомление__${тип}`}>
`notification__left`}>
`уведомление__значок__${тип}`}/>
"уведомление__содержимое">
`notification__title уведомление__title__${тип}`}>{название}</div>
`уведомление__описание уведомление__описание__${тип}`}>{описание}</div>
 </div>
 </div>
`уведомление__значок__${тип}`}/>
 </div>
 )
}

В этом компоненте вы динамически устанавливаете класс в зависимости от типа, например уведомление__успех или уведомление__ошибка.

Чтобы увидеть это в действии, импортируйте компонент Notification в App.jsx и используйте его следующим образом:

Импортировать Уведомление от'./Уведомление'
функцияПриложение() {
возвращаться (
 <>
 тип="успех"
 название =«Задание выполнено»
 описание=«Ваша задача успешно выполнена».
 />
 </>
 )
}
экспортпо умолчанию Приложение

Теперь вы можете передать другой тип в Уведомление компонент и отобразить соответствующее уведомление, соответствующее сообщению.

Это важно для удобного взаимодействия с пользователем, поскольку пользователи привыкли ассоциировать разные цвета и стили с разными сценариями, и важно последовательно использовать эти ассоциации. Например, было бы запутанно сообщить пользователю, что он успешно загрузил фотографию в красном окне уведомления. Они могут подумать, что загрузка не удалась, даже если она прошла успешно.

Добавление интерактивности в компонент уведомлений

Вы узнали, как можно использовать свойства для создания настраиваемого компонента уведомлений. Чтобы пойти еще дальше, вы можете добавить переходы к этому компоненту, чтобы сделать его более привлекательным. Например, вы можете использовать анимацию CSS, чтобы сдвинуть компонент уведомления на экран и сдвинуть его по истечении определенного времени.