diff --git a/reflex/components/component.py b/reflex/components/component.py index 5db03404668..64445193db4 100644 --- a/reflex/components/component.py +++ b/reflex/components/component.py @@ -2190,6 +2190,9 @@ def _register_custom_component( Args: component_fn: The function that creates the component. + Returns: + The custom component. + Raises: TypeError: If the tag name cannot be determined. """ @@ -2214,6 +2217,7 @@ def _register_custom_component( msg = f"Could not determine the tag name for {component_fn!r}" raise TypeError(msg) CUSTOM_COMPONENTS[dummy_component.tag] = dummy_component + return dummy_component def custom_component( @@ -2237,7 +2241,24 @@ def wrapper(*children, **props) -> CustomComponent: ) # Register this component so it can be compiled. - _register_custom_component(component_fn) + dummy_component = _register_custom_component(component_fn) + if tag := dummy_component.tag: + object.__setattr__( + wrapper, + "_as_var", + lambda: Var( + tag, + _var_type=type[Component], + _var_data=VarData( + imports={ + f"$/{constants.Dirs.UTILS}/components": [ImportVar(tag=tag)], + "@emotion/react": [ + ImportVar(tag="jsx"), + ], + } + ), + ), + ) return wrapper diff --git a/reflex/vars/base.py b/reflex/vars/base.py index 020d09aea05..4985fa55878 100644 --- a/reflex/vars/base.py +++ b/reflex/vars/base.py @@ -1476,6 +1476,13 @@ def _create_literal_var( if isinstance(value, var_subclass.python_types): return literal_subclass.create(value, _var_data=_var_data) + if ( + (as_var_method := getattr(value, "_as_var", None)) is not None + and callable(as_var_method) + and isinstance((resulting_var := as_var_method()), Var) + ): + return resulting_var + from reflex.event import EventHandler from reflex.utils.format import get_event_handler_parts