Merge pull request #4 from nparashar150/utils/styleToString

Feat: create function to convert JsObjectCss to CssString

lib/createElement.js

@@ -1,3 +1,5 @@
+import { styleToString } from "./utils/styleToString";
+
 /**
  *
  * @param {HTMLElement} element
@@ -25,6 +27,10 @@ export const createElement = ({
       // if prop is className
       _htmlElement.setAttribute("class", props[propName]);
     }
+    if (propName.toLowerCase() === "style") {
+      // if prop is style
+      _htmlElement.setAttribute("style", styleToString(props[propName]));
+    }
     // rest other propNames
     _htmlElement?.setAttribute(propName, props[propName]);
   });

lib/utils/styleToString.js

@@ -0,0 +1,19 @@
+// converts JS object to CSS string
+export const styleToString = (style) => {
+  // if style is not an object then return empty string
+  if (Object.keys(style).length === 0) return "";
+
+  // reduce Object into single string of CSS
+  return Object.keys(style).reduce(
+    (acc, key) =>
+      acc +
+      key
+        .split(/(?=[A-Z])/) // split camelCase
+        .join("-") // join with hyphen (-)
+        .toLowerCase() + // convert to kebab-case
+      ":" + // add colon after key
+      style[key] + // add value of style
+      ";", // add semicolon at the end of each style
+    ""
+  );
+};

src/components/button/button.js

@@ -0,0 +1,28 @@
+import { createElement } from "../../../lib/createElement";
+
+export const button = (parentElement, props, innerText) => {
+  if (!parentElement) return;
+
+  // styling in JS object is converted to CSS string
+  const buttonStyles = {
+    backgroundColor: "#EEE",
+    color: "#1a1a1a",
+    padding: "10px",
+    border: "none",
+    borderRadius: "5px",
+    cursor: "pointer",
+  };
+
+  const button = createElement({
+    element: "button",
+    props: {
+      ...props,
+      style: buttonStyles,
+    },
+    state: {},
+    children: innerText,
+    parentElement,
+  });
+
+  return button;
+};

src/index.js

@@ -1,4 +1,5 @@
 import { createElement } from "../lib/createElement";
+import { button } from "./components/button/button";
 
 (function createDOMNode() {
   const root = document.body;
@@ -96,5 +97,15 @@ import { createElement } from "../lib/createElement";
     ],
     parentElement: divCreatedFromFunction,
   });
+
+  button(
+    root,
+    {
+      onclick: () => {
+        alert("You have clicked me!!");
+      },
+    },
+    "Click Me"
+  );
 })();
 export { createElement };