Как сделать парящие воздушные шары 🎈Effect в ReactJS

Итак, вы хотите разместить несколько воздушных шаров на веб-странице, да? 🤔 🎈 Возможно, это день рождения или какой-то другой праздник. Может быть, вы хотите отпраздновать на своем сайте или для своих пользователей. Теперь, как насчет того, чтобы у вас также была функция, чтобы выталкивать их с помощью пакетного звука 🎈💥. Это было бы так здорово, не правда ли? 😂

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

TL;DR

npm i реагировать-плавающие-шарики

• Создает пользовательские плавающие воздушные шары в ReactJS/NextJS

• Пользовательский счетчик, сообщения, зацикливание, HangOnTop, несколько цветов и т. д.

• Поддерживает анимацию и звук всплывающих воздушных шаров

• Использует React Portal и Styled-Components

Благодаря этому сложному [сообщению] (https://erdoganbavas.medium.com/creating-birthday-balloons-like-twitter-profile-no-image-5348a1dc2720) я быстро начал работу. Но это было реализовано в ванильном HTML/CSS/JS. И у него было не так много возможностей для настройки. С одной стороны, я думал о создании библиотеки ReactJS npm, а с другой стороны, мои мысли блуждали. Ум блуждает, когда блуждает, верно? 😂 Я всё думал о том, чтобы написать на воздушном шаре собственные сообщения и лопнуть их.

После сшивания некоторого кода и настройки некоторых функций я сделал рабочий пример в ReactJS. Библиотека, используемая для поп-анимации, находится [здесь] (https://www.npmjs.com/package/@mojs/core). Я был не совсем доволен кодом. Было две проблемы:

• Некоторые основные части элемента всплывающей подсказки все еще использовали обычный HTML/JS/CSS.

• У меня был очень низкий уровень контроля над кастомизацией воздушных шаров.

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

Я быстро понял, что любая проблема с конфликтами CSS в пользовательском интерфейсе исчезнет, ​​если я буду использовать портал реагирования здесь. Пока я работал над устранением вышеуказанных проблем, я столкнулся с серьезной проблемой при появлении всплывающих подсказок в мобильных браузерах (устройства с сенсорным экраном).

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

Решение: позволить таким устройствам лопать шарики одним щелчком мыши. И для распознавания таких устройств самым простым рабочим решением было:

const supportsTouch = «ontouchstart» в окне || navigator.msMaxTouchPoints;

Я выпускал несколько исправлений и мелких обновлений/исправлений версии для тестирования, а затем столкнулся с еще одним серьезным препятствием в SSR. Похоже, это не работает с NextJS. Две проблемы:

• Проблема ReferenceError: self is notdefined, которую можно легко решить с помощью динамического импорта с флагом { ssr: false } и отображением всплывающего компонента только после CSR.

• [Глобальный CSS нельзя импортировать из node_modules](https://github.com/vercel/next.js/issues/19936). Похоже, NextJS еще не поддерживает это. Единственным возможным рабочим решением было использование модуля next-global-css с next.config.js, что может потребовать много работы для некоторых разработчиков.

Через несколько часов я понял, что лучший способ избавиться от большинства вышеперечисленных и предыдущих проблем — использовать styled-components.

Я начал переписывать все элементы шара и анимацию с нуля. После того, как я реализовал все основные функции воздушного шара и всплывающих окон, я также начал добавлять некоторые новые функции. Теперь у меня был полный контроль над всеми элементами воздушного шара и их настройкой. Стало легко добавлять дополнительные функции. Я смог добавить 2 дополнительные функции, такие как loop, hangOnTop всего за несколько минут каждая.

Также была исправлена ​​проблема «отсутствие одновременного звука лопающихся воздушных шаров». 😊 Полный размер кода без зависимостей составляет всего \~3 КБ на момент написания этой статьи.

Итак, вот библиотека 🎈:

npm i реагировать-плавающие-шарики

И вот базовый пример:

React Floating Balloons — [Базовый пример] (https://codesandbox.io/s/react-floating-balloons-basic-example-4cx9kh?from-embed) CodeSandBo

Пожалуйста, не стесняйтесь поднимать любые вопросы [здесь] (https://github.com/sanishkr/react-floating-balloons/issues/new)

Обучение:

• В начале повторяйте очень быстро.

• Создание примеров для пользователей при написании таких библиотек дает больше ясности самому себе.

• Тестируйте на различных устройствах, так как это помогает найти ошибки.

• Убедитесь, что у вас есть высокий уровень контроля над основными элементами и компонентами для быстрой настройки и уменьшения количества ошибок.

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

Все отзывы и GitHub ⭐️ приветствуются. Спасибо за прочтение.

Счастливого лопания воздушных шаров!! 🎈💥

Также опубликовано здесь.