@leancodepl/hook-pipe-client
Version:
React hooks for real-time data streaming and subscriptions using @leancodepl/pipe
52 lines (48 loc) • 1.89 kB
JavaScript
;
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;