From cf33e86edb653ff3bd3c80e9f3d4292d2160a609 Mon Sep 17 00:00:00 2001
From: Alek Petuskey <alek@pynecone.io>
Date: Wed, 14 Dec 2022 16:13:01 -0800
Subject: [PATCH] Added html component  (#98)

---
 pynecone/components/layout/__init__.py |  1 +
 pynecone/components/layout/box.py      |  2 --
 pynecone/components/layout/html.py     | 40 ++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 pynecone/components/layout/html.py

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)