antonioru / antonioru/beautiful-react-diagrams
Typescript with custom Nodes
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 171
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
Type definition for ports doesn't extends `React.DetailedReactHTMLElement` which makes `createSchema` throw error
**To Reproduce**
```typescript
import { createSchema } from "beautiful-react-diagrams";
import React from "react";
const CustomNode = (props: {
inputs?: React.DetailedReactHTMLElement[];
}) => {
const { inputs } = props;
return (
{inputs?.map((port) =>
React.cloneElement(port, {
style: { width: "50px", height: "25px", background: "#1B263B" }
})
)}
);
};
createSchema({
nodes: [
{
id: "node-1",
content: "Node 1",
coordinates: [150, 60],
outputs: [{ id: "port-1", alignment: "right" }]
},
{
id: "node-custom",
coordinates: [250, 60],
render: CustomNode, // <-- ERROR
inputs: [{ id: "custom-port-1", alignment: "left" }]
}
]
});
```
**Expected behavior**
not to throw error
**Screenshots**
**Additional context**
live preview:
https://codesandbox.io/s/beautiful-react-diagram-ts-error-vxw5h
Contributor guide
Assessment
This issue has not been assessed yet.