@leancodepl/hook-pipe-client

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

Installation

``bash
npm install @leancodepl/hook-pipe-client


or

- pipe: Pipe - Pipe instance from @leancodepl/pipe

Returns: Object containing createTopic method for creating typed hooks

$3

Options for topic subscription hooks.

Properties:

- [NotificationType]?: (data: NotificationData) => void - Type-specific handlers for each notification type
- onData?: (data: NotificationsUnion) => void - Callback for all notifications

Usage Examples

$3

`typescript
import { mkPipeClient } from "@leancodepl/hook-pipe-client"
import { createPipe } from "@leancodepl/pipe"

const pipe = createPipe({
url: "wss://api.example.com/pipe",
getAccessToken: () => localStorage.getItem("token"),
})

const pipeClient = mkPipeClient({ pipe })
`

$3

`typescript
import React, { useState } from 'react';

interface ChatTopic {
roomId: string;
}

interface ChatNotifications {
MessageReceived: {
id: string;
content: string;
authorId: string;
};
}

const useChatTopic = pipeClient.createTopic('chat');

function ChatRoom({ roomId }: { roomId: string }) {
const [messages, setMessages] = useState([]);

const { data } = useChatTopic(
{ roomId },
{
MessageReceived: (data) => {
setMessages(prev => [...prev, data.content]);
},
// or
onData: (notification) => {
if (notification.type === 'MessageReceived') {
setMessages(prev => [...prev, notification.data.content]);
}
},
}
);

return (


`typescript
import React, { useState } from 'react';

interface MetricsTopic {
dashboardId: string;
}

interface MetricsNotifications {
CpuUpdate: { value: number };
MemoryUpdate: { value: number };
}

const useMetricsTopic = pipeClient.createTopic('metrics');

function Dashboard() {
const [cpu, setCpu] = useState(0);
const [memory, setMemory] = useState(0);

useMetricsTopic(
{ dashboardId: 'main' },
{
CpuUpdate: (data) => {
setCpu(data.value);
},
MemoryUpdate: (data) => {
setMemory(data.value);
}
// or
onData: (notification) => {
if (notification.type === 'CpuUpdate') {
setCpu(notification.data.value);
} else if (notification.type === 'MemoryUpdate') {
setMemory(notification.data.value);
}
},
}
);

return (