Skip to content

Custom Node with import calls fails聽#5

Open

Description

@DavZim

The following should work, but because the CustomNode function calls an import, it fails.

library(reactflow)

nodes <- list(
  list(id = "jd", position = list(x = 200, y = 50),
       data = list(label = "Jane Doe", title = "CEO", icon = "馃懇")),
  list(id = "tw", position = list(x = 0, y = 200),
       data = list(label = "Tyler Weary", title = "Designer", icon = "馃懆")),
  list(id = "kp", position = list(x = 400, y = 200),
       data = list(label = "Kristi Price", title = "Developer", icon = "馃懇"))
)
edges <- list(
  list(id = "jd-tw", source = "jd", target = "tw"),
  list(id = "jd-kp", source = "jd", target = "kp")
)


node_types <- JS(reactR::babel_transform('
import React, { memo } from "react";
import { Handle, Position } from "@xyflow/react";
 
function CustomNode({ data }) {
  return (
    <div className="container">
        <div className="emoji">
          {data.emoji}
        </div>
        <div className="text-element">
          <div className="text-name">{data.name}</div>
          <div className="text-job">{data.job}</div>
        </div>
      </div>
 
      <Handle
        type="target"
        position={Position.Top}
        className="handle"
      />
      <Handle
        type="source"
        position={Position.Bottom}
        className="handle"
      />
    </div>
  );
}
'))

reactflow(
  nodes,
  edges,
  mini_map(),
  controls(),
  background(),
  nodeTypes = node_types
)

Activity

  1. DavZim commented on Jan 10, 2025

    @DavZim
    OwnerAuthor

    For reference, this is the example code from the official source` (note the example code from above comes from the tailwind example, but the tailwindCSS classes where striped):

    import { useCallback } from 'react';
    import { Handle, Position } from '@xyflow/react';
     
    const handleStyle = { left: 10 };
     
    function TextUpdaterNode({ data }) {
      const onChange = useCallback((evt) => {
        console.log(evt.target.value);
      }, []);
     
      return (
        <>
          <Handle type="target" position={Position.Top} />
          <div>
            <label htmlFor="text">Text:</label>
            <input id="text" name="text" onChange={onChange} className="nodrag" />
          </div>
          <Handle type="source" position={Position.Bottom} id="a" />
          <Handle
            type="source"
            position={Position.Bottom}
            id="b"
            style={handleStyle}
          />
        </>
      );
    }
    
  2. DavZim commented on Jan 10, 2025

    @DavZim
    OwnerAuthor

    @timelyportfolio, I hope you don't mind me bothering you again. Feel free to say if I'm asking too much of you!

    Do you have any idea how we can tackle this and provide custom custom react code with imports from a user-side?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions