export types and add docs

src/index.ts

@@ -3,3 +3,11 @@ export { useChannel } from './useChannel';
 export { useEvent } from './useEvent';
 export { usePhoenix } from './usePhoenix';
 export { usePresence } from './usePresence';
+
+export type {
+  Channel,
+  ChannelMeta,
+  ChannelState
+} from './useChannel';
+
+export type { PhoenixSocket, SocketConnectOption } from './usePhoenix';

src/useChannel/useChannel.ts

@@ -62,7 +62,7 @@ export function useChannel<Params extends ChannelParams, JoinPayload>(
 
     if (existingChannel) {
       /* If we find an existing channel with this topic,
-					we need to reconect our internal reference. */
+        we reconect our internal reference. */
       set(existingChannel);
       channelRef.current = existingChannel;
 
@@ -116,15 +116,33 @@ export function useChannel<Params extends ChannelParams, JoinPayload>(
     channelRef.current = _channel;
   }, [isConnected, topic, setMeta, set]);
 
+  /**
+   * Pushes an event to the channel.
+   *
+   * @param event - The event to push.
+   * @param payload - The payload to send with the event.
+   * @returns Promise
+   */
   const push: PushFunction = useCallback((event, payload) => {
     if (channelRef.current === null) return Promise.reject('Channel is not connected.');
     return pushPromise(channelRef.current.push(event, payload ?? {}));
   }, []);
 
-  /*
+  /**
    * Allows you to leave the channel.
-   * useChannel does not automatically leave the channel when the component unmounts by default.
    *
+   * useChannel does not automatically leave the channel when the component unmounts by default. If
+   * you want to leave the channel when the component unmounts, you can use a useEffect:
+   *
+   * @example
+   * ```ts
+   *  useEffect(() => {
+   *    return () => {
+   *      leave();
+   *    };
+   *  }, []);
+   * ```
+   * @returns void
    */
   const leave = useCallback(() => {
     if (channelRef.current instanceof ChannelClass) {

src/useEvent/useEvent.ts

@@ -4,43 +4,53 @@ import useLatest from '../useLatest';
 import { EventAction } from './types';
 
 /**
- * A hook to subscribe to a Phoenix channel event.
+ * A hook to subscribe to a Phoenix Channel event.
+ *
+ * You may obtain the event data from the `data` property and/or the `listener` callback.
  *
  * @example
  * ```ts
+ * 	type NewMessageEvent = {
+ *			event: 'new_message';
+ *			data: { message: string };
+ * 	};
+ *
  *	const [channel, state] = useChannel('room:1');
- *	useEvent(channel, 'new_message', handleMessage);
+ *	const { data } = useEvent<NewMessageEvent>(channel, 'new_message', handleMessage);
  * ```
  *
+ *
  * @param channel - A `Channel` provided by `useChannel`.
  * @param event - The event name to listen for.
  * @param listener - The callback function to invoke when the event is received.
+ *
+ * @returns The data from the event.
  */
 export function useEvent<Event extends EventAction>(
-	channel: Channel | undefined | null,
-	event: Event['event'],
-	listener?: (response: Event['data']) => void
+  channel: Channel | undefined | null,
+  event: Event['event'],
+  listener?: (response: Event['data']) => void
 ): { data: Event['data'] | null } {
-	const handler = useLatest(listener);
+  const handler = useLatest(listener);
 
-	const [data, setData] = useState<Event['data'] | null>(null);
+  const [data, setData] = useState<Event['data'] | null>(null);
 
-	useEffect(() => {
-		if (!channel) return;
-		if (typeof event !== 'string') return;
+  useEffect(() => {
+    if (!channel) return;
+    if (typeof event !== 'string') return;
 
-		const ref = channel.on(event, (message) => {
-			if (typeof handler.current === 'function') {
-				handler.current(message);
-			}
+    const ref = channel.on(event, (message) => {
+      if (typeof handler.current === 'function') {
+        handler.current(message);
+      }
 
-			setData(message);
-		});
+      setData(message);
+    });
 
-		return () => {
-			channel.off(event, ref);
-		};
-	}, [channel, event, handler]);
+    return () => {
+      channel.off(event, ref);
+    };
+  }, [channel, event, handler]);
 
-	return { data };
+  return { data };
 }