feat : wrapper for all components

src/HOC/wrapper.tsx

@@ -1,3 +1,28 @@
-export default function Wrapper() {
+import React from 'react'
 
+// @ts-expect-error(type declaration missing)
+import RevealBase from '../lib/Base.js'
+
+/**
+ * this function is a wrapper for all the reveal components
+ * @param {object} props
+ * @param {boolean} props.when
+ * @param {boolean} props.in
+ * @param {string} props.inEffect
+ * @param {string} props.outEffect
+ * @param {React.ReactNode} children
+ * @returns {React.ReactNode}
+ */
+export default function wrapper(props: { when: any; in: any }, inEffect: any, outEffect: any, children: string | number | boolean |
+    React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined) {
+  if ('in' in props)
+    props.when = props.in
+    // check if children is a single element
+  if (React.Children.count(children) < 2)
+    return <RevealBase {...props} inEffect={inEffect} outEffect={outEffect} children={children} />
+    // map through elements if children is an array
+  children = React.Children.map(children, child =>
+        <RevealBase {...props} inEffect={inEffect} outEffect={outEffect} children={child} />,
+  )
+  return 'Fragment' in React ? <React.Fragment>{children}</React.Fragment> : <span>{children}</span>
 }

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es2018",
     "lib": ["esnext", "DOM", "ES6"],
+    "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",
     "paths": {