💩 update

Author: JB1905

README.md

@@ -1,7 +1,7 @@
 # [react-custom-events-hooks](https://github.com/cool-hooks/react-custom-events-hooks)
 
-[![NPM version](http://img.shields.io/npm/v/react-custom-events-hooks?style=flat-square)](https://www.npmjs.com/package/react-custom-events-hooks)
-[![NPM downloads](http://img.shields.io/npm/dm/react-custom-events-hooks?style=flat-square)](https://www.npmjs.com/package/react-custom-events-hooks)
+[![NPM version](https://img.shields.io/npm/v/react-custom-events-hooks?style=flat-square)](https://www.npmjs.com/package/react-custom-events-hooks)
+[![NPM downloads](https://img.shields.io/npm/dm/react-custom-events-hooks?style=flat-square)](https://www.npmjs.com/package/react-custom-events-hooks)
 [![NPM license](https://img.shields.io/npm/l/react-custom-events-hooks?style=flat-square)](https://www.npmjs.com/package/react-custom-events-hooks)
 [![Codecov](https://img.shields.io/codecov/c/github/cool-hooks/react-custom-events-hooks?style=flat-square)](https://codecov.io/gh/cool-hooks/react-custom-events-hooks)
 [![Travis](https://img.shields.io/travis/cool-hooks/react-custom-events-hooks/master?style=flat-square)](https://travis-ci.org/cool-hooks/react-custom-events-hooks)

__tests__/useCustomEvent.test.ts

@@ -8,17 +8,30 @@ describe('useCustomEvent', () => {
       useCustomEvent({ eventName: 'myAwesomeCustomEvent' })
     );
 
-    // expect(result.sum(2, 3)).toBe(5);
+    result.current('hello');
   });
 
   it('should', () => {
+    const onSignal = jest.fn();
+
     const { result } = renderHook(() =>
       useCustomEvent({
         eventName: 'myAwesomeCustomEvent',
-        onSignal: (e) => null,
+        defaultValue: {
+          sender: 'dummy-sender',
+        },
+        onSignal,
       })
     );
 
-    // expect(result.sum(2, 3)).toBe(5);
+    result.current({
+      title: 'hello',
+      message: 'world',
+    });
+
+    expect(onSignal).toHaveBeenCalledWith({
+      title: 'hello',
+      message: 'world',
+    });
   });
 });

__tests__/useEmitter.test.ts

@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useEmitter } from '../src';
+
+describe('useEmitter', () => {
+  it('should', () => {
+    const { result } = renderHook(() => useEmitter('myAwesomeCustomEvent'));
+
+    result.current({
+      title: 'hello',
+    });
+  });
+
+  it('should', () => {
+    const { result } = renderHook(() => null);
+  });
+});

__tests__/useListener.test.ts

@@ -0,0 +1,37 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useCustomEvent, useListener } from '../src';
+
+describe('useListener', () => {
+  it('should', () => {
+    const { result } = renderHook(() =>
+      useCustomEvent({ eventName: 'myAwesomeCustomEvent' })
+    );
+
+    result.current('hello');
+  });
+
+  it('should', () => {
+    const onSignal = jest.fn();
+
+    const { result } = renderHook(() =>
+      useCustomEvent({
+        eventName: 'myAwesomeCustomEvent',
+        defaultValue: {
+          sender: 'dummy-sender',
+        },
+        onSignal,
+      })
+    );
+
+    result.current({
+      title: 'hello',
+      message: 'world',
+    });
+
+    expect(onSignal).toHaveBeenCalledWith({
+      title: 'hello',
+      message: 'world',
+    });
+  });
+});

src/useCustomEvent.ts renamed to src/hooks/useCustomEvent.ts

@@ -1,24 +1,24 @@
 import { useListener } from './useListener';
 import { useEmitter } from './useEmitter';
 
-import type { Element, Options } from './types';
+import type { Element, Options } from '../types';
 
-interface Params {
+interface Params<T> {
   readonly eventName: string;
-  onSignal?: (e: CustomEvent) => void;
+  onSignal?: (e: CustomEvent<T>) => void;
   readonly element?: Element;
   readonly options?: Options;
 }
 
-export const useCustomEvent = ({
+export const useCustomEvent = <T>({
   eventName,
   onSignal,
   element = window,
   options = {},
-}: Params) => {
+}: Params<T>) => {
   const handleSignal = onSignal || (() => null);
 
-  useListener(eventName, handleSignal, element, options);
+  useListener<T>(eventName, handleSignal, element, options);
 
-  return useEmitter(eventName, element);
+  return useEmitter<T>(eventName, element);
 };

src/hooks/useEmitter.ts

@@ -0,0 +1,11 @@
+import type { Element } from '../types';
+
+export const useEmitter = <T>(eventName: string, element: Element = window) => {
+  const callEvent = (data: T) => {
+    const event = new CustomEvent(eventName, { detail: data });
+
+    element.dispatchEvent(event);
+  };
+
+  return callEvent;
+};

src/hooks/useListener.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+import type { Element, Options } from '../types';
+
+export const useListener = <T>(
+  eventName: string,
+  onSignal: (e: CustomEvent<T>) => void,
+  element: Element = window,
+  options: Options = {}
+) => {
+  useEffect(() => {
+    if (typeof onSignal === 'function') {
+      const handleSignal = (e: Event) => {
+        onSignal(e as CustomEvent);
+      };
+
+      element.addEventListener(eventName, handleSignal, options);
+
+      return () =>
+        element.removeEventListener(eventName, handleSignal, options);
+    }
+  }, [element, eventName, onSignal, options]);
+};

src/index.ts

@@ -1,3 +1,3 @@
-export { useEmitter } from './useEmitter';
-export { useListener } from './useListener';
-export { useCustomEvent } from './useCustomEvent';
+export { useEmitter } from './hooks/useEmitter';
+export { useListener } from './hooks/useListener';
+export { useCustomEvent } from './hooks/useCustomEvent';