diff --git a/pynecone/components/component.py b/pynecone/components/component.py index 681ed145e..926495f9e 100644 --- a/pynecone/components/component.py +++ b/pynecone/components/component.py @@ -66,6 +66,8 @@ class Component(Base, ABC): # components that cannot be children invalid_children: List[str] = [] + # custom attribute + custom_attrs: Dict[str, str] = {} @classmethod def __init_subclass__(cls, **kwargs): @@ -181,6 +183,8 @@ class Component(Base, ABC): **{attr: value for attr, value in kwargs.items() if attr not in fields}, } ) + if "custom_attrs" not in kwargs: + kwargs["custom_attrs"] = {} # Convert class_name to str if it's list class_name = kwargs.get("class_name", "") @@ -436,6 +440,7 @@ class Component(Base, ABC): sx=self.style, id=self.id, class_name=self.class_name, + **self.custom_attrs, ).set( children=[child.render() for child in self.children], contents=str(tag.contents), diff --git a/tests/components/test_component.py b/tests/components/test_component.py index e766cf7fe..52c232d57 100644 --- a/tests/components/test_component.py +++ b/tests/components/test_component.py @@ -181,6 +181,16 @@ def test_set_style_attrs(component1): assert component.style["textAlign"] == "center" +def test_custom_attrs(component1): + """Test that custom attributes are set in the dict. + + Args: + component1: A test component. + """ + component = component1(custom_attrs={"attr1": "1", "attr2": "attr2"}) + assert component.custom_attrs == {"attr1": "1", "attr2": "attr2"} + + def test_create_component(component1): """Test that the component is created correctly.