{"id":13726551,"url":"https://github.com/rescriptbr/react-flow","last_synced_at":"2025-12-28T13:24:24.012Z","repository":{"id":52738095,"uuid":"335322636","full_name":"rescriptbr/react-flow","owner":"rescriptbr","description":"ReScript bindings for React Flow 🚀","archived":false,"fork":false,"pushed_at":"2021-09-08T11:15:32.000Z","size":294,"stargazers_count":42,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-10T21:09:16.304Z","etag":null,"topics":["react-flow","rescript-bindings","rescript-react","rescript-react-bindings","rescript-react-flow"],"latest_commit_sha":null,"homepage":"","language":"ReScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rescriptbr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-02T14:49:24.000Z","updated_at":"2025-03-09T19:01:27.000Z","dependencies_parsed_at":"2022-08-22T17:00:19.025Z","dependency_job_id":null,"html_url":"https://github.com/rescriptbr/react-flow","commit_stats":null,"previous_names":["diogomqbm/rescript-react-flow"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Freact-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Freact-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Freact-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Freact-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rescriptbr","download_url":"https://codeload.github.com/rescriptbr/react-flow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242967513,"owners_count":20214282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-flow","rescript-bindings","rescript-react","rescript-react-bindings","rescript-react-flow"],"created_at":"2024-08-03T01:03:12.622Z","updated_at":"2025-12-28T13:24:18.963Z","avatar_url":"https://github.com/rescriptbr.png","language":"ReScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/logo.svg\" /\u003e\n  \u003cbr /\u003e\n\u003c/p\u003e\n\n# ReScript React Flow\n\n[React Flow](https://reactflow.dev/) bindings for ReScript.\n\n## Installation\n\n1. Install `@rescriptbr/react-flow` using npm:\n\n```\nnpm install --save @rescriptbr/react-flow\n```\n\nor yarn:\n\n```\nyarn add @rescriptbr/react-flow\n```\n\n2. Add `@rescriptbr/react-flow` as dependency to your `bsconfig.json`:\n\n```json\n{\n  \"name\": \"your-project\",\n  \"bs-dependencies\": [\"@rescriptbr/react-flow\"]\n}\n```\n\n# Examples\n\nCheck the code below for fast basic examples:\n\n#### Creating a simple Node\n\n```rescript\n ReactFlow.Types.Node(\n    ReactFlow.Node.makeNode(\n      ~id=\"1\",\n      ~position={x: 250, y: 0},\n      ~data=ReactFlow.Node.toData({\"label\": React.string(\"test\")}),\n      ~type_=\"input\",\n      (),\n    ),\n  ),\n```\n\n#### Creating a simple Edge\n\n```rescript\nReactFlow.Types.Edge(\n    ReactFlow.Edge.makeEdge(\n      ~id=\"e1-2\",\n      ~source=\"1\",\n      ~target=\"2\",\n      ~label=\"this is an edge label\",\n      ~data=ReactFlow.Edge.toData(\"some other data\"),\n      (),\n    ),\n  ),\n```\n\n#### Creating elements array\n\n```rescript\nlet elements = [\n  ReactFlow.Types.Edge(\n    ReactFlow.Edge.makeEdge(\n      ~id=\"e1-2\",\n      ~source=\"1\",\n      ~target=\"2\",\n      ~label=\"this is an edge label\",\n      ~data=ReactFlow.Edge.toData(\"some other data\"),\n      (),\n    ),\n  ),\n  ReactFlow.Types.Node(\n    ReactFlow.Node.makeNode(\n      ~id=\"1\",\n      ~position={x: 250, y: 0},\n      ~data=ReactFlow.Node.toData({\"label\": React.string(\"test\")}),\n      ~type_=\"input\",\n      (),\n    ),\n  ),\n]\n```\n\n#### Rendering React Flow\n\n```rescript\n@react.component\nlet make = () =\u003e {\n  let (elems, setElems) = React.useState(() =\u003e elements)\n  let onElementsRemove = elementsToRemove =\u003e {\n    setElems(elems =\u003e ReactFlow.Utils.removeElements(elementsToRemove, elems))\n  }\n\n  let onConnect = newEdgeParams =\u003e {\n    setElems(elems =\u003e ReactFlow.Utils.addEdge(newEdgeParams, elems))\n  }\n\n  \u003cdiv className=\"App\" style={ReactDOM.Style.make(~height=\"800px\", ~width=\"1200px\", ())}\u003e\n    \u003cReactFlow\n      elements={elems-\u003eReactFlow.Utils.elementsToRaw}\n      onElementsRemove\n      onConnect\n      onLoad\n      snapToGrid=true\n      snapGrid=(15, 15)\u003e\n      \u003cReactFlow.Controls /\u003e\n      \u003cReactFlow.Background variant=#lines color=\"#aaa\" gap={16} /\u003e\n      \u003cReactFlow.MiniMap\n        nodeColor={n =\u003e {\n          switch ReactFlow.Node.type_Get(n) {\n          | Some(\"input\") =\u003e \"#0041d0\"\n          | Some(\"output\") =\u003e \"#ff0072\"\n          | Some(\"default\") =\u003e \"#1a192b\"\n          | _ =\u003e \"#eee\"\n          }\n        }}\n        nodeStrokeColor={_ =\u003e \"#fff\"}\n        nodeBorderRadius={2}\n      /\u003e\n    \u003c/ReactFlow\u003e\n  \u003c/div\u003e\n}\n```\n\nPlease look at the example folder for more advanced implementations.\n\n## Contributing\n\nIf you'd like to contribute, you can follow the instructions below to get things working locally.\n\n### Getting Started\n\n1. After cloning the repo, install the dependencies\n\n```\nyarn install\n```\n\n2. Build:\n\n```\nyarn re:build\n```\n\n3. If you're running the example, in other terminal run:\n\n```\nyarn start\n```\n","funding_links":[],"categories":["ReScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescriptbr%2Freact-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frescriptbr%2Freact-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescriptbr%2Freact-flow/lists"}