Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] useEventListener can be used with SVGElement, but rejected by type-check #546

Closed
LumaKernel opened this issue Mar 18, 2024 · 0 comments · Fixed by #547
Closed

[BUG] useEventListener can be used with SVGElement, but rejected by type-check #546

LumaKernel opened this issue Mar 18, 2024 · 0 comments · Fixed by #547
Labels
bug Something isn't working

Comments

@LumaKernel
Copy link
Contributor

Describe the bug

useEventListener is actually usable with SVG Elements (like <circle />) but this rejects accepting SVG Elements refs.

To Reproduce

You can try this with https://stackblitz.com/edit/vitejs-vite-hyclkt?file=src%2FApp.tsx

import { useRef, useState } from 'react';
import { useEventListener } from 'usehooks-ts';

function App() {
  const [hovering, setHovering] = useState(false);
  const ref = useRef<SVGCircleElement>(null);
  useEventListener(
    'mouseenter',
    () => {
      setHovering(true);
    },
    ref
  );
  useEventListener(
    'mouseleave',
    () => {
      setHovering(false);
    },
    ref
  );
  return (
    <svg width="400" height="400">
      <circle
        ref={ref}
        cx={100}
        cy={100}
        r={50}
        fill={hovering ? 'red' : 'cyan'}
        stroke="black"
        style={{
          cursor: 'pointer',
        }}
      />
    </svg>
  );
}

export default App;

Expected behavior

Can be built with type-check succeeded.

Additional context

interface SVGCircleElement extends SVGGeometryElement {}
interface SVGGeometryElement extends SVGGraphicsElement {}
interface SVGGraphicsElement extends SVGElement, SVGTests {}
interface SVGElement extends Element, ElementCSSInlineStyle, GlobalEventHandlers, HTMLOrSVGElement {}
interface SVGTests has no super-interfaces.
interface Element extends Node, ARIAMixin, Animatable, ChildNode, InnerHTML, NonDocumentTypeChildNode, ParentNode, Slottable {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant