We have made some significant improvements to React Flow UI (formerly known as
React Flow components). These changes enhance the functionality, visual look and usability
of the components, to improive the general developer experience.
Re-organize components
Some components have been moved to examples, while others have been consolidated in a new
structure:
Nodes Utilities: These components can be used as building blocks for creating custom
nodes.
Custom Nodes: These are fully functional nodes that can be used directly in your
application.
Handles: These components are used to create connection points inside nodes.
Custom Edges: Fully functional edges that can be used out of the box.
Controls: Collection of interactive controls.
Miscellaneous: Various utility components that don’t fit into the other categories,
like DevTools.
BaseNodeHeader and BaseNodeHeaderTitle for the header section,
BaseNodeContent for the main content area and
BaseNodeFooter for the footer section.
This structure allows for better organization of content within the node, making it easier
to create complex node layouts.
Improved examples and nodes
We have also added a few new components and improved existing ones. Our component pages
now include more comprehensive examples that showcase the new features and capabilities of
the components. For example:
New NodeAppendix component, which can be used to add
additional information or controls to nodes, like a
Node Badge!
The AnnotationNode component has been moved to an
example usage of BaseNode, to
demonstrate how to style the BaseNode.
The StatusIndicator now includes a variant with an
overlaying spinner, and improved usage examples.
The TooltipNode component, has been improved and moved to
NodeTooltip. It is no longer a custom node, but rather
an utility component that you can use to wrap a custom node with a tooltip.
No more selected prop
You don’t need to pass the selected prop to the BaseNode or its related components
anymore. Styling the selected state is now handled automatically by tailwind CSS
selectors.
However, selected is still a valid prop for nodes in React Flow, and you can still use
it to determine if a node is selected or not in your custom components. If you do not need
the selected prop for custom logic, but you only use it for styling, you can safely
remove it from your components, and you can follow how BaseNode is implemented to
achieve custom styling for your custom selected nodes.
We hope these improvements make your experience with React Flow UI even better. If you
have any feedback or suggestions, please let us know via mail or
Discord !
