Potential conflicts with svg elements about react-three-fiber HOT 6 CLOSED

import { extend } from 'react-three-fiber';
import { Line } from 'three';

// Add class `Line` as `Line_` to react-three-fiber's extend function. This
// makes it so that when you use <line_> in a <Canvas>, the three reconciler
// will use the class `Line`
extend({ Line_: Line });

// declare `line_` as a JSX element so that typescript doesn't complain
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'line_': ReactThreeFiber.Object3DNode<Line, typeof Line>,
        }
    }
}

After doing this somewhere in your application you can use <line_> instead of <line> and Typescript won't get confused.

from react-three-fiber.

Typescript complains about it though!

I'm trying to use fiber's <line>, but Typescript thinks it's a JSX.IntrinsicElements.line: React.SVGProps<SVGLineElement>, which of course is not.

Ignoring the line with a @ts-ignore works, of course, but it's kind of annoying

from react-three-fiber.

register it as _line. unfortunately typescript thinks jsx is about the dom only, it doesnt take reconcilers into account.

Can you explain how to do this? I'm still using

  // @ts-ignore
  return <line geometry={geometry} material={material} {...props}></line>

Thanks!

from react-three-fiber.

You can't mix svgs and three. Everything that is inside canvas is part of the three reconciler. Everything outside is part of the dom reconciler (react-dom). You can either:

Run both side-by-side:

<Canvas>
  <line /> // THREE.Line
</Canvas>
<svg>
  <line /> // the dom element "line"
</svg>

Or use Three's svg renderer https://codesandbox.io/s/yq90n32zmx

This is everyday React, though, not really a limitation but the way React works.

from react-three-fiber.

Got it, thanks! I just didn't understand how it knew to make an svg component vs a three component

from react-three-fiber.

register it as _line. unfortunately typescript thinks jsx is about the dom only, it doesnt take reconcilers into account.

from react-three-fiber.