ReScript React Flow

React Flow bindings for ReScript.

Installation

1. Install rescript-react-flow using npm:

``
npm install --save @rescripbr/react-flow
`

or yarn:

`
yarn add @rescriptbr/react-flow
`

2. Add rescript-react-flow as dependency to your bsconfig.json:

`json
{
"name": "your-project",
"bs-dependencies": ["@rescriptbr/react-flow"]
}
`

Examples

Check the code below for fast basic examples:

#### Creating a simple Node

`rescript
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

`rescript
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

`rescript
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

`rescript
@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))
}


}
`

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.

$3

1. After cloning the repo, install the dependencies

`
npm install
`

2. Build and start the example server:

`
npm start
``