В этой серии статей я разрабатываю и кодирую различные общие компоненты пользовательского интерфейса с помощью React и ‹размещаю здесь решение CSS›.
Материальный дизайн был чрезвычайно популярен в течение многих лет, и одним из самых крутых эффектов, которые он представил, был эффект ряби, который обеспечивает привлекательную визуальную обратную связь для пользователя при нажатии / касании элемента.
Если вы не знаете, что такое эффект ряби - он выглядит примерно так:
В прошлый раз мы создали компонент ToggleSwitch, который использовал этот вид волнового эффекта, чтобы анимация переключения выглядела немного красивее. После этой статьи я столкнулся с многочисленными ситуациями, когда мне нужно было / хотелось использовать тот же эффект пульсации в каком-то другом компоненте, и поэтому я решил разделить эффект пульсации на его собственный компонент более высокого порядка, который можно легко использовать с любым стилем. компонент.
В последнее время я часто использую стилизованные компоненты, поэтому я использовал их для создания HOC для эффекта ряби. Итак, без лишних слов, вот код HOC:
Довольно просто, правда?
Честно говоря, я скопировал реализацию эффекта пульсации на чистом CSS из этого репозитория Github и просто обернул его в стилизованный div и использовал шаблон React HOC. Итак, вся заслуга в создании эффекта принадлежит первоначальным создателям 🙏
Хорошо, давайте посмотрим, как мы можем использовать этот HOC:
И когда мы визуализируем эти блоки и щелкаем по ним, это выглядит так:
Вот и все! Если вы используете стилизованные компоненты, вы можете легко улучшить любой обычный или стилизованный компонент React с помощью HOC withRipple и получить эффект без особых хлопот.
Не стесняйтесь использовать Суть, как хотите! 😎
Мы нанимаем!
Вы хотите создавать захватывающие и интересные приложения с использованием современных веб-технологий? Ознакомьтесь с нашими открытыми вакансиями и присоединяйтесь к нам в Taito United!
Не можете найти подходящие должности? Желаете приключений? Отправьте свое резюме и открытую заявку на адрес [email protected] - мы будем более чем рады услышать вас и увидеть, что вы готовите 🍳
