diff --git a/src/React/Basic/DOM/Events.js b/src/React/Basic/DOM/Events.js
new file mode 100644
index 0000000..8e46b86
--- /dev/null
+++ b/src/React/Basic/DOM/Events.js
@@ -0,0 +1,5 @@
+"use strict";
+
+export const propagateThis = (f) => (t) => () => {
+  return f.call(t);
+}
diff --git a/src/React/Basic/DOM/Events.purs b/src/React/Basic/DOM/Events.purs
index 0207c16..f7241d1 100644
--- a/src/React/Basic/DOM/Events.purs
+++ b/src/React/Basic/DOM/Events.purs
@@ -102,7 +102,7 @@ nativeEvent = unsafeEventFn \e -> (unsafeCoerce e).nativeEvent
 
 preventDefault :: EventFn SyntheticEvent SyntheticEvent
 preventDefault = unsafeEventFn \e -> unsafePerformEffect do
-  _ <- (unsafeCoerce e).preventDefault
+  _ <- propagateThis (unsafeCoerce e).preventDefault e
   pure e
 
 isDefaultPrevented :: EventFn SyntheticEvent Boolean
@@ -111,7 +111,7 @@ isDefaultPrevented = unsafeEventFn \e -> unsafePerformEffect do
 
 stopPropagation :: EventFn SyntheticEvent SyntheticEvent
 stopPropagation = unsafeEventFn \e -> unsafePerformEffect do
-  _ <- (unsafeCoerce e).stopPropagation
+  _ <- propagateThis (unsafeCoerce e).stopPropagation e
   pure e
 
 isPropagationStopped :: EventFn SyntheticEvent Boolean
@@ -207,3 +207,5 @@ clipboardData = unsafeEventFn \e -> toMaybe (unsafeCoerce e).clipboardData
 -- \ Composition Events
 compositionData :: EventFn SyntheticEvent (Maybe String)
 compositionData = unsafeEventFn \e -> toMaybe (unsafeCoerce e).data
+
+foreign import propagateThis :: forall f t a. f -> t -> Effect a
diff --git a/src/React/Basic/DOM/Simplified/ToJSX.purs b/src/React/Basic/DOM/Simplified/ToJSX.purs
index 37516f6..dd9e806 100644
--- a/src/React/Basic/DOM/Simplified/ToJSX.purs
+++ b/src/React/Basic/DOM/Simplified/ToJSX.purs
@@ -1,15 +1,55 @@
 module React.Basic.DOM.Simplified.ToJSX
   ( class ToJSX
+  , el
   , toJSX
-  ) where
+  )
+  where
 
 import Prelude
 
 import Data.Array (singleton)
 import Data.Maybe (Maybe(..))
-import React.Basic (JSX)
+import Prim.Row (class Lacks)
+import React.Basic (JSX, ReactComponent)
+import React.Basic as React
+import Record as Record
+import Type.Proxy (Proxy(..))
 import Unsafe.Coerce (unsafeCoerce)
 
+-- | Helper function to easily use any `ReactComponent` and compose it with the simplified html tags.
+-- | E.g. using NextUI: 
+-- | ```purescript
+-- | -- Import the simplified elements
+-- | import React.Basic.DOM.Simplified.Generated as R
+-- | 
+-- | ...
+-- | 
+-- | -- Import your react components
+-- | foreign import container :: forall props. ReactComponent { | props }
+-- | foreign import row :: forall props. ReactComponent { | props }
+-- | foreign import col :: forall props. ReactComponent { | props }
+-- | 
+-- | ...
+-- | 
+-- | -- Build your jsx
+-- | el container {} $ 
+-- |   el row {} $ 
+-- |   el col {} $ 
+-- |   R.div {} "Some text"
+-- | ```
+el
+  ∷ ∀ props jsx
+   . Lacks "children" props
+  => ToJSX jsx
+  ⇒ ReactComponent { children ∷ Array JSX | props }
+  → Record props
+  → jsx
+  → JSX
+el cmp props children =
+  (React.element)
+    cmp
+    (Record.insert (Proxy ∷ Proxy "children") (toJSX children) props)
+
 class ToJSX jsx where
   toJSX :: jsx -> Array JSX