ReScript React Flow
React Flow bindings for ReScript.
Installation
- 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"]
}Examples
Check the code below for fast basic examples:
Creating a simple Node
ReactFlow.Types.Node(
ReactFlow.Node.makeNode(
~id="1",
~position={x: 250, y: 0},
~data=ReactFlow.Node.toData({"label": React.string("test")}),
~type_="input",
(),
),
),Creating a simple Edge
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"),
(),
),
),Creating elements array
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",
(),
),
),
]Rendering React Flow
@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.
Contributing
If you'd like to contribute, you can follow the instructions below to get things working locally.
Getting Started
- 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