UNPKG

@leancodepl/hook-pipe-client

Version:

React hooks for real-time data streaming and subscriptions using @leancodepl/pipe

52 lines (48 loc) 1.89 kB
'use strict'; var react = require('react'); var deepEqual = require('deep-equal'); var rxjs = require('rxjs'); /** * Creates React hooks for real-time data subscriptions using "@leancodepl/pipe". * * @param pipe - Pipe instance from "@leancodepl/pipe" * @returns Object containing `createTopic` method for creating typed hooks * @example * ```typescript * const pipe = createPipe({ url: 'wss://api.example.com/pipe' }); * const pipeClient = mkPipeClient({ pipe }); * * const useChatTopic = pipeClient.createTopic('chat'); * ``` */ function mkPipeClient({ pipe }) { return { createTopic (topicType) { function useTopic(topic, { onData }) { const [data, setData] = react.useState(); const onDataRef = react.useRef(onData); onDataRef.current = onData; const memoizedTopic = react.useRef(); if (memoizedTopic.current === undefined || !deepEqual(memoizedTopic.current, topic)) { memoizedTopic.current = topic; } react.useEffect(()=>{ const topic$ = pipe.topic(topicType, memoizedTopic.current).pipe(rxjs.share()); const subscription = topic$.subscribe((data)=>{ setData(data); onDataRef.current == null ? void 0 : onDataRef.current.call(onDataRef, data); }); return ()=>subscription.unsubscribe(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [ memoizedTopic.current ]); return { data }; } useTopic.topic = (topic)=>pipe.topic(topicType, topic); return useTopic; } }; } exports.mkPipeClient = mkPipeClient;