Add el helper (#47)

* Add el helper

* Fix comment

Author: sigma-andex

Diff for: 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