@chroma-x/react-custom-dom-events - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

package.json

 {
 	"name": "@chroma-x/react-custom-dom-events",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "Easily integrate custom DOM events in React functional components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

readme.md

@@ -101,4 +101,28 @@ # react-custom-dom-events
 
+`useCustomDomEventListener` returns a closure that allows you to remove the added event listener if required. 
+
+```typescript
+import { useRef } from 'react';
+import { useCustomDomEventListener } from '@chroma-x/react-custom-dom-events';
+
+const listenerElement = useRef(null);
+
+const removeListener = useCustomDomEventListener<string>(listenerElement, 'myCustomEvent', (event): void => {
+  event.stopPropagation();
+  console.debug(event.detail);
+});
+
+const handleClick = (): void => {
+	removeListener();
+};
+
+return (
+  <div ref={listenerElement}>
+    <button onClick={handleClick}>Remove event listener</button>
+  </div>
+);
+```
+
 `useCustomDomEventListener` makes use of the useEffect hook, so it can be used in functional components only.
 
 There is no need to handle the removal of the event listener. Listeners are removed on component unmount by reacts useEffect destructor.

No alert changes

Improved metrics

Total package byte prevSize

12197

increased by5.43%

Number of lines in readme file

128

increased by23.08%

No dependency changes