add custom mapping

Author: rwieruch

README.md

@@ -44,6 +44,37 @@ const props = {
 return <Dropdown {...props} />;
 ```
 
+### Custom Mapping
+
+You can also define a custom mapping:
+
+```
+import React from 'react';
+
+// Web Component Use Case
+// install via npm install road-dropdown
+import 'road-dropdown';
+
+import useCustomElement from 'use-custom-element';
+
+const Dropdown = props => {
+  const [customElementProps, ref] = useCustomElement(props, {
+    option: 'selected',
+    onChange: 'click',
+  });
+
+  console.log(customElementProps);
+
+  // label: "Label"
+  // options: "{"option1":{"label":"Option 1"},"option2":{"label":"Option 2"}}"
+  // selected: "option1"
+
+  // and "onChange" mapped to "click" event for the event listener
+
+  return <my-dropdown {...customElementProps} ref={ref} />;
+};
+```
+
 ## Contribute
 
 * `git clone [email protected]:the-road-to-learn-react/use-custom-element.git`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-custom-element",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/index.js

@@ -1,14 +1,15 @@
 import React from 'react';
 
-const useCustomElement = props => {
+const useCustomElement = (props, customMapping = {}) => {
   const ref = React.createRef();
 
   React.useLayoutEffect(() => {
     const fns = Object.keys(props)
       .filter(key => props[key] instanceof Function)
       .map(key => ({
-        key,
-        fn: customEvent => props[key](customEvent.detail),
+        key: customMapping[key] || key,
+        fn: customEvent =>
+          props[key](customEvent.detail, customEvent),
       }));
 
     fns.forEach(({ key, fn }) =>
@@ -21,19 +22,19 @@ const useCustomElement = props => {
       );
   }, []);
 
-  const customElementProps = Object.keys(props).reduce((acc, key) => {
-    const prop = props[key];
+  const customElementProps = Object.keys(props)
+    .filter(key => !(props[key] instanceof Function))
+    .reduce((acc, key) => {
+      const prop = props[key];
 
-    if (prop instanceof Object || prop instanceof Array) {
-      return { ...acc, [key]: JSON.stringify(prop) };
-    }
+      const computedKey = customMapping[key] || key;
 
-    if (prop instanceof Function) {
-      return acc;
-    }
+      if (prop instanceof Object || prop instanceof Array) {
+        return { ...acc, [computedKey]: JSON.stringify(prop) };
+      }
 
-    return { ...acc, [key]: prop };
-  }, {});
+      return { ...acc, [computedKey]: prop };
+    }, {});
 
   return [customElementProps, ref];
 };