@lobehub/ui/es/FontLoader/index.js

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { memo, useEffect, useRef } from 'react';
var createElement = function createElement(url) {
  var element = document.createElement('link');
  element.rel = 'stylesheet';
  element.href = url;
  return element;
};
var FontLoader = /*#__PURE__*/memo(function (_ref) {
  var url = _ref.url;
  var elementRef = useRef(null);
  useEffect(function () {
    // Create and append element
    var element = createElement(url);
    document.head.append(element);
    elementRef.current = element;

    // Optional: Add error handling
    var handleError = function handleError() {
      return console.error("Failed to load font from ".concat(url));
    };
    element.addEventListener('error', handleError);

    // Cleanup function to remove element when component unmounts
    // or when url changes
    return function () {
      element.removeEventListener('error', handleError);
      element.remove();
      elementRef.current = null;
    };
  }, [url]);
  return null;
});
FontLoader.displayName = 'FontLoader';
export default FontLoader;