diff --git a/pynecone/components/layout/__init__.py b/pynecone/components/layout/__init__.py index 9443e0c20..bceb381b5 100644 --- a/pynecone/components/layout/__init__.py +++ b/pynecone/components/layout/__init__.py @@ -7,6 +7,7 @@ from .container import Container from .flex import Flex from .foreach import Foreach from .grid import Grid, GridItem, ResponsiveGrid +from .html import Html from .spacer import Spacer from .stack import Hstack, Stack, Vstack from .wrap import Wrap, WrapItem diff --git a/pynecone/components/layout/box.py b/pynecone/components/layout/box.py index d8a4fe5e7..fb3b31462 100644 --- a/pynecone/components/layout/box.py +++ b/pynecone/components/layout/box.py @@ -1,7 +1,5 @@ """A box component that can contain other components.""" -from typing import Optional - from pynecone.components.libs.chakra import ChakraComponent from pynecone.components.tags import Tag from pynecone.var import Var diff --git a/pynecone/components/layout/html.py b/pynecone/components/layout/html.py new file mode 100644 index 000000000..baeb1570c --- /dev/null +++ b/pynecone/components/layout/html.py @@ -0,0 +1,40 @@ +"""A html component.""" + +from pynecone.components.layout.box import Box +from pynecone.var import Var +from typing import Dict + + +class Html(Box): + """Render the html. + + Returns: + The code to render the html component. + """ + + # The HTML to render. + dangerouslySetInnerHTML: Var[Dict] + + @classmethod + def create(cls, *children, **props): + """Create a html component. + + Args: + *children: The children of the component. + **props: The props to pass to the component. + + Returns: + The html component. + + Raises: + ValueError: If children are not provided or more than one child is provided. + """ + # If children are not prvided, throw an error. + if len(children) != 1: + raise ValueError("Must provide children to the html component.") + else: + + props["dangerouslySetInnerHTML"] = {"__html": children[0]} + + # Create the component. + return super().create(**props)