Skip to main content

UserComponent

Type

A wrapper of React.ComponentType<Props>. Accepts a static craft property for configuring the User Component.

Reference

Properties

  • React.ComponentType<T> &
    • craftObject
      • displayNameString
        A user-friendly name for the User Component. The value here will be used to set the node.data.displayName property.
      • propsT
        Specify default values for the props T
      • customRecord<string, any>
        Specify default custom values for the User Component
      • relatedRecord<string, React.ElementType>
        A map of React Components to share the same Node context. This components will be able access the useNode hook
      • rules?
        • canDrag(currentNode: Node, helpers: NodeHelpers) => boolean
          Specifies if the component can be dragged. Applicable only to components whose corresponding Node is a direct child of a Canvas
        • canDrop(targetNode: Node, currentNode, helpers: NodeHelpers) => boolean
          Specifies if the current Node that is being dragged can be dropped in its target. Applicable only if the current Node is a direct child of a Canvas Node
        • canMoveIn(incomingNodes: Node[], currentNode: Node, helpers: NodeHelpers) => boolean
          Specifies if an array of incoming Nodes can be dropped into the current component. Applicable only to components whose corresponding Node is a Canvas
        • canMoveOut(outgoingNodes: Node[], currentNode: Node, helpers: NodeHelpers) => boolean
          Specifies if an array of child Nodes can be dragged out of the current component. Applicable only to components whose corresponding Node is a Canvas

Example

type TextProps = {
color: string;
text: string;
};

const TextComponent: UserComponent<TextProps> = ({color, text}) => {
return (
<h2 style={{color}}>{text}</h2>
)
}

const TextSettings = () => {
const {props, setProp} = useNode();
return (
<div>
Text: <input type="text" value={props.text} onChange={e => setProp(props => props.text = e.target.value) }/>
Color: <input type="text" value={props.color} onChange={e => setProp(props => props.color = e.target.value) }/>
</div>
)
}
TextComponent.craft = {
displayName: "My Text Component",
props: {
color: "#000",
text: "Hi"
},
rules: {
canDrag: (self: Node, helper) => true,
canMoveIn: (incoming: Node[], self: Node, helper) => true,
canMoveOut: (outgoing: Node[], self: Node, helper) => true
},
related: {
settings: TextSettings
}
}