Custom Expand Holder Slot

Demonstrates how to completely customize expand/collapse buttons using slots with custom icons, animations, and behaviors.

Custom Expand Holder Slot

Functional Overview

This example demonstrates how to completely customize the expand/collapse button component using slots, allowing for custom icons, animations, and behaviors.

Implementation of Key Features

Custom Expand Holder Component

Create a custom expand/collapse button:

const MyExpandHolder = ({ node, onToggle }: { node: RGNode, onToggle: () => void }) => {
    return (
        <div
            className="custom-expand-button"
            onClick={onToggle}
        >
            {node.collapsed ? '+' : '-'}
        </div>
    );
};

Slot Integration

Use the custom component in node slots:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <>
            <div>{node.text}</div>
            {node.lot.childs.length > 0 && (
                <MyExpandHolder
                    node={node}
                    onToggle={() => graphInstance.toggleNodeCollapsed(node)}
                />
            )}
        </>
    )}
</RGSlotOnNode>

Animated Transitions

Add animation when expanding/collapsing:

const toggleWithAnimation = async (node: RGNode) => {
    graphInstance.enableCanvasAnimation();
    graphInstance.toggleNodeCollapsed(node);
    await graphInstance.sleep(300);
    graphInstance.disableCanvasAnimation();
};

Creative Use Cases

• Branded UI: Match expand buttons to design system
• Icon Libraries: Use specific icon sets (FontAwesome, Material)
• Animated Buttons: Custom hover and click animations
• Context-Aware: Different icons for different node types
• Accessibility: High-contrast or larger buttons for visibility