craft.js
craft.js copied to clipboard
connectors does not work on PrimeReact components
Describe the bug When I write the simple sample code below, I get the following error:
import {useNode} from "@craftjs/core";
import {InputSwitch} from "primereact/inputswitch";
export const MyComponent = () => {
const {connectors: {connect, drag}} = useNode();
return <InputSwitch ref={ref => connect(drag(ref!))} checked={true}/>;
}
TS2345: Argument of type Â
InputSwitch
 is not assignable to parameter of typeHTMLElement | ReactElement<any, string | JSXElementConstructor<any>>
Type ÂInputSwitch
 is missing the following properties from typeReactElement<any, string | JSXElementConstructor<any>>
: Âtype, key
Â
Inside PrimeReact
, the base type of ref
is React.Component
, not React.ReactElement
:
export declare class InputSwitch extends React.Component<InputSwitchProps, any> {
public focus(): void;
public getElement(): HTMLDivElement;
public getInput(): HTMLInputElement;
}
And not all components have the getElement()
method.
I could forcefully ignore the typescript error with the any
type, but I don't know how much of an impact it would have, especially the ones that can't be found at the moment.
To Reproduce
Expected behavior
Screenshots
Additional context
Your environment
Software | Version(s) |
---|---|
craft.js | 0.2.2 |
React | 18.2.0 |
TypeScript | 5.2.2 |
Browser | - |
npm/Yarn | - |
Operating System | - |
I could also wrap PrimeReact component with a div
so that I only have to get the ref
of the div
and not the PrimeReact component.
But this approach also has a major drawback, it makes the DOM structure more complex and performance worse.