rescriptbr/react-flow

ReScript bindings for React Flow 🚀

ReScript React Flow

React Flow bindings for ReScript.

Installation

1. Install @rescriptbr/react-flow using npm:

npm install --save @rescriptbr/react-flow

or yarn:

yarn add @rescriptbr/react-flow

2. Add @rescriptbr/react-flow as dependency to your bsconfig.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

1. After cloning the repo, install the dependencies

yarn install

2. Build:

yarn re:build

3. If you're running the example, in other terminal run:

yarn start

react-flow's Issues

v10 bindings

Recently React Flow has released it's v10 and it contains lots of breaking changes on their API (https://reactflow.dev/docs/guides/migrate-to-v10/). Therefore we'd need new bindings to make it work with ReScript.

I'd definitely offer to make a PR for this but I'm still a beginner in ReScript and I'm not even sure how to begin. If this hasn't been tackled yet by the time I have enough knowledge to do so, I'll do it. Also I'm not really sure how the versioning works for these cases? Will it just be a new major NPM version for the bindings?

Thanks in advance if anyone decides to tackle this. I'll be using a previous version of React Flow meanwhile.