Add react.js helper.

docs/examples.md

@@ -4,11 +4,18 @@
 This is a javascript react example, for typescript, one additional declaration is necessary to make typescript work out of the box. See [Troubleshooting with React + Typescript](./troubleshooting.md#typescript).
 
 ```jsx
-import React, { Component } from 'react';
+import React, { useEffect, Component } from 'react';
 import 'openapi-explorer';
+import { reactEventListener } from '../../../../openapi-explorer/dist/es/react.js'
 
 export class MyApi extends Component {
   render() {
+    const onRequestFunction = (data) => {
+      console.log('Request:', data);
+    };
+
+    // Necessary because react by default does not know how to listen to HTML5 events
+    reactEventListener({ useEffect }, 'request', onRequestFunction);
     return <openapi-explorer
       spec-url = "https://petstore.swagger.io/v2/swagger.json">
     </openapi-explorer>
@@ -20,7 +27,7 @@ export class MyApi extends Component {
 ```vue
 <template>
   <openapi-explorer
-    spec-url = "https://petstore.swagger.io/v2/swagger.json">
+    spec-url="https://petstore.swagger.io/v2/swagger.json">
   </openapi-explorer>
 </template>
 

src/react.js

@@ -0,0 +1,31 @@
+/**
+ * reactEventListener - takes the hard work out of adding and removing listeners in React
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener}
+ *
+ * @param {object} React - The React object that contains the method { useEffect }.
+ * @param {string} eventName - A case-sensitive string or strings representing the event type to listen for
+ * @param {function} callbackFunction - callback function - The object that receives a notification (an object that implements the Event interface) when an event of the specified type occurs
+ */
+export function reactEventListener({ useEffect }, eventName, functionCallback) {
+  const targetElement = window;
+
+  useEffect(() => {
+    targetElement.addEventListener(eventName, functionCallback);
+    // This is an effect that requires cleanup when the component using this
+    // custom hook unmounts:
+    // https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
+    return () => {
+      // Check if the event functionCallback we were given was a debounced or throttled
+      // event functionCallback, if it is, cancel any future events
+      // https://github.com/niksy/throttle-debounce#cancelling
+      if (functionCallback?.cancel) {
+        functionCallback.cancel();
+      }
+
+      // Remove the event functionCallbacks
+      if (targetElement?.removeEventListener) {
+        targetElement.removeEventListener(eventName, functionCallback);
+      }
+    };
+  }, [eventName, functionCallback, targetElement]);
+}