0.3.1 • Published 10 months ago
rete-react-render-plugin v0.3.1
React Render
Rete.js plugin
import ReactRenderPlugin from 'rete-react-render-plugin';
editor.use(ReactRenderPlugin);
Use with React.js v18
import { createRoot } from 'react-dom/client';
import ReactRenderPlugin from 'rete-react-render-plugin';
editor.use(ReactRenderPlugin, { createRoot });
Create control:
class MyReactControl extends React.Component {
componentDidMount() {
// this.props.getData
// this.props.putData
}
render() {
return (
<div>Hello ${this.props.name}!</div>
)
}
}
class MyControl extends Rete.Control {
constructor(emitter, key, name) {
super(key);
this.render = 'react';
this.component = MyReactControl;
this.props = { emitter, name };
}
}
Customize node:
import ReactRenderPlugin, { Node, Socket, Control } from 'rete-react-render-plugin';
export class MyNode extends Node {
render() {
const { node, bindSocket, bindControl } = this.props;
const { outputs, controls, inputs, selected } = this.state;
return (
<div className={`node ${selected}`}>
<div className="title">{node.name}</div>
{/* Outputs */}
{outputs.map((output) => (
<div className="output" key={output.key}>
<div className="output-title">{output.name}</div>
<Socket type="output" socket={output.socket} io={output} innerRef={bindSocket} />
</div>
))}
{/* Controls */}
{controls.map(control => (
<Control className="control" key={control.key} control={control} innerRef={bindControl} />
))}
{/* Inputs */}
{inputs.map(input => (
<div className="input" key={input.key}>
<Socket type="input" socket={input.socket} io={input} innerRef={bindSocket} />
{!input.showControl() && <div className="input-title">{input.name}</div>}
{input.showControl() && <Control className="input-control" control={input.control} innerRef={bindControl} />}
</div>
))}
</div>
)
}
}
editor.use(ReactRenderPlugin, {
component: MyNode // common custom React component
}
Component specific custom node:
class AddComponent extends Rete.Component {
constructor() {
super("Add");
this.data.component = MyNode;
}
...
2.0.0-beta.22
11 months ago
2.0.0-beta.21
12 months ago
2.0.0-beta.23
10 months ago
2.0.0-beta.9
1 year ago
2.0.0-beta.8
1 year ago
2.0.0-beta.7
1 year ago
2.0.0-beta.20
12 months ago
2.0.0-beta.2
1 year ago
2.0.0-beta.1
1 year ago
2.0.0-beta.6
1 year ago
2.0.0-beta.5
1 year ago
2.0.0-beta.4
1 year ago
2.0.0-beta.3
1 year ago
2.0.0-beta.11
1 year ago
2.0.0-beta.10
1 year ago
2.0.0-beta.15
1 year ago
2.0.0-beta.14
1 year ago
2.0.0-beta.13
1 year ago
2.0.0-beta.12
1 year ago
2.0.0-beta.19
1 year ago
2.0.0-beta.18
1 year ago
0.3.1
1 year ago
2.0.0-beta.17
1 year ago
2.0.0-beta.16
1 year ago
0.3.0
2 years ago
0.2.1
4 years ago
0.2.0
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago