Поиск по сайту:

Как создать пользовательский компонент уведомлений в React


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

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

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

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

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

yarn create vite

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

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

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

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

yarn dev

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

Проектирование компонента уведомлений

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

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

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

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

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

export default function Notification({type, title, description}) {
  return (
    <div>
        {/* Notification content */}
    </div>
  )
}

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

Из дизайна компонент имеет пару иконок, а именно информацию, и значок крестика. Вы можете загрузить бесплатные значки или использовать компонент значков из пакета, например react-icons. В этом руководстве будет использоваться react-icons, поэтому установите его, выполнив команду ниже.

yarn add react-icons

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

import { RxCross2, RxInfoCircled } from "react-icons/rx"

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

export default function Notification({type, title, description}) {
  return (
    <div>
        <div>
            <RxInfoCircled/>
            <div>
                <div>{title}</div>
                <div>{description}</div>
            </div>
        </div>
        <RxCross2/>
    </div>
  )
}

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

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

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

import "./notification.css"

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

.notification {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px;
}
.notification__left {
  display: flex;
  flex-direction: row;
  padding: 0px;
  gap: 8px;
  margin-right: 24px;
}
.notification__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
}
.notification__title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
}
.notification__description {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  padding: 0;
}

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

.notification__success {
  background: #f6fef9;
  border: 1px solid #2f9461;
  border-radius: 8px;
}
.notification__error {
  background: #fffbfa;
  border: 1px solid #cd3636;
  border-radius: 8px;
}
.notification__warning {
  background: #fffcf5;
  border: 1px solid #c8811a;
  border-radius: 8px;
}

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

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

.notification__title__success {
  color: #2f9461;
}
.notification__title__warning {
  color: #c8811a;
}
.notification__title__error {
  color: #cd3636;
}

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

.notification__description__success {
  color: #53b483;
}
.notification__description__warning {
  color: #e9a23b;
}
.notification__description__error {
  color: #f34141;
}

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

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

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

export default function Notification({type, title, description}) {
  return (
    <div className={`notification notification__${type}`}>
        <div className={`notification__left`}>
            <RxInfoCircled className={`notification__icon__${type}`}/>
            <div className="notification__content">
                <div className={`notification__title notification__title__${type}`}>{title}</div>
                <div className={`notification__description notification__description__${type}`}>{description}</div>
            </div>
        </div>
        <RxCross2 className={`notification__icon__${type}`}/>
    </div>
  )
}

В этом компоненте вы динамически устанавливаете класс в зависимости от типа, например notification__success или notification__error.

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

import Notification from './Notification'
function App() {
  return (
    <>
      <Notification
        type="success"
        title="Task Completed"
        description="Your task has been completed successfully."
      />
    </>
  )
}
export default App

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

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

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

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

Статьи по данной тематике: