Библиотека для React в стиле Dynamic Island: создаем современные уведомления

TL;DR: Мы создали библиотеку для React, которая реализует уведомления в стиле Dynamic Island от Apple. Библиотека проста в использовании, кастомизируема и идеально подходит для современных веб-приложений.

Введение

Dynamic Island — это инновационный подход к отображению уведомлений и системной информации на устройствах Apple. Этот стиль стал популярным благодаря своей минималистичности и интерактивности. Мы решили адаптировать этот подход для веб-приложений на React, создав библиотеку react-island.

Основная часть

Установка и базовое использование

Для начала установим библиотеку:

npm install react-island

Теперь подключим ее в нашем проекте:

import { IslandProvider, useIsland } from 'react-island';

function App() {
  return (
    <IslandProvider>
      <MyComponent />
    </IslandProvider>
  );
}

function MyComponent() {
  const { show } = useIsland();

  const handleClick = () => {
    show({
      message: 'Hello, Dynamic Island!',
      type: 'info',
    });
  };

  return (
    <button onClick={handleClick}>Show Notification</button>
  );
}

Кастомизация уведомлений

Библиотека поддерживает различные типы уведомлений (info, success, warning, error) и позволяет кастомизировать их внешний вид:

show({
  message: 'Custom Notification',
  type: 'success',
  duration: 5000,
  position: 'top-right',
  icon: <CustomIcon />,
  onClose: () => console.log('Notification closed'),
});

Анимации и интерактивность

Для достижения эффекта Dynamic Island мы использовали CSS-анимации и трансформации:

.island-notification {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}

.island-notification.hide {
  transform: translateY(-100%);
  opacity: 0;
}

Расширенные возможности

Библиотека также поддерживает группировку уведомлений и их динамическое обновление:

const { update } = useIsland();

const notificationId = show({ message: 'Initial Message' });

setTimeout(() => {
  update(notificationId, { message: 'Updated Message' });
}, 2000);

Практическое применение

react-island идеально подходит для:

Веб-приложений с интенсивным взаимодействием: уведомления не перегружают интерфейс и легко интегрируются в существующий дизайн.
Проектов, требующих минималистичного подхода: стиль Dynamic Island обеспечивает четкость и лаконичность.
Приложений с реальным временем: динамическое обновление уведомлений позволяет отображать актуальную информацию.

Заключение

Библиотека react-island предлагает современный и эффективный способ реализации уведомлений в веб-приложениях на React. Она сочетает в себе минимализм и функциональность, делая взаимодействие пользователя с интерфейсом более приятным и интуитивно понятным. Попробуйте ее в своих проектах и поделитесь своим опытом!

GitHub репозиторий: react-island

Источник: https://www.reddit.com/r/reactjs/comments/1t35p0v/i_built_a_dynamic_islandstyle_toast_library_for/