Создание React-хука для превращения любой react-icon в курсор

TL;DR: Мы создали React-хук, который позволяет превратить любую react-icon в SVG и использовать её как CSS-курсор. Хук принимает конфигурационный объект, включая селектор и иконку, и автоматически обрабатывает всё остальное.

Введение

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

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

Создание хука

Для начала, давайте создадим React-хук, который будет принимать иконку и конвертировать её в SVG, а затем использовать её как CSS-курсор.

import { useEffect } from 'react';

const useIconCursor = ({ selector, icon, size = 24, color = 'black', hotspot = { x: 0, y: 0 } }) => {
  useEffect(() => {
    const svg = icon.props.children;
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${color}">${svg}</svg>`;
    const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
    const cursorStyle = `url(${dataUrl}) ${hotspot.x} ${hotspot.y}, auto`;

    const elements = document.querySelectorAll(selector);
    elements.forEach((element) => {
      element.style.cursor = cursorStyle;
    });

    return () => {
      elements.forEach((element) => {
        element.style.cursor = 'auto';
      });
    };
  }, [selector, icon, size, color, hotspot]);
};

export default useIconCursor;

Использование хука

Теперь, когда у нас есть хук, давайте посмотрим, как его использовать в компоненте.

import React from 'react';
import { FaBeer } from 'react-icons/fa';
import useIconCursor from './useIconCursor';

const App = () => {
  useIconCursor({
    selector: '.custom-cursor',
    icon: <FaBeer />,
    size: 32,
    color: 'gold',
    hotspot: { x: 8, y: 8 }
  });

  return (
    <div className="custom-cursor">
      <h1>Наведите курсор на этот текст</h1>
    </div>
  );
};

export default App;

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

Игры и интерактивные приложения

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

Портфолио и креативные проекты

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

Заключение

Создание React-хука для превращения любой react-icon в курсор — это интересный способ кастомизации интерфейсов. Хотя этот подход может быть избыточным для большинства приложений, он открывает новые возможности для творчества и уникального дизайна. Попробуйте использовать этот хук в своих проектах и поделитесь своими результатами!

GitHub: react-icon-cursor
Demo: React Icon Cursor Demo

Попробуй сам: Cursor — AI-редактор для разработчиков.

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