React Flow bindings for ReScript.
- Install
@rescriptbr/react-flowusing npm:
npm install --save @rescriptbr/react-flow
or yarn:
yarn add @rescriptbr/react-flow
- Add
@rescriptbr/react-flowas dependency to yourbsconfig.json:
{
"name": "your-project",
"bs-dependencies": ["@rescriptbr/react-flow"]
}Check the code below for fast basic examples:
ReactFlow.Types.Node( ReactFlow.Node.makeNode( ~id="1", ~position={x: 250, y: 0}, ~data=ReactFlow.Node.toData({"label": React.string("test")}), ~type_="input", (), ), ),
ReactFlow.Types.Edge( ReactFlow.Edge.makeEdge( ~id="e1-2", ~source="1", ~target="2", ~label="this is an edge label", ~data=ReactFlow.Edge.toData("some other data"), (), ), ),
let elements = [ ReactFlow.Types.Edge( ReactFlow.Edge.makeEdge( ~id="e1-2", ~source="1", ~target="2", ~label="this is an edge label", ~data=ReactFlow.Edge.toData("some other data"), (), ), ), ReactFlow.Types.Node( ReactFlow.Node.makeNode( ~id="1", ~position={x: 250, y: 0}, ~data=ReactFlow.Node.toData({"label": React.string("test")}), ~type_="input", (), ), ), ]
@react.component let make = () => { let (elems, setElems) = React.useState(() => elements) let onElementsRemove = elementsToRemove => { setElems(elems => ReactFlow.Utils.removeElements(elementsToRemove, elems)) } let onConnect = newEdgeParams => { setElems(elems => ReactFlow.Utils.addEdge(newEdgeParams, elems)) } <div className="App" style={ReactDOM.Style.make(~height="800px", ~width="1200px", ())}> <ReactFlow elements={elems->ReactFlow.Utils.elementsToRaw} onElementsRemove onConnect onLoad snapToGrid=true snapGrid=(15, 15)> <ReactFlow.Controls /> <ReactFlow.Background variant=#lines color="#aaa" gap={16} /> <ReactFlow.MiniMap nodeColor={n => { switch ReactFlow.Node.type_Get(n) { | Some("input") => "#0041d0" | Some("output") => "#ff0072" | Some("default") => "#1a192b" | _ => "#eee" } }} nodeStrokeColor={_ => "#fff"} nodeBorderRadius={2} /> </ReactFlow> </div> }
Please look at the example folder for more advanced implementations.
If you'd like to contribute, you can follow the instructions below to get things working locally.
- After cloning the repo, install the dependencies
yarn install
- Build:
yarn re:build
- If you're running the example, in other terminal run:
yarn start