@anonfly/react

React hooks and headless components for the Anonfly SDK. Build premium, secure messaging interfaces with ease.

Why use @anonfly/react?

While @anonfly/sdk provides the core logic, @anonfly/react bridges the gap between the SDK and your React components. It handles state synchronization, WebSocket event lifecycle, and common UI patterns so you don't have to.

• Headless Hooks: Pure logic hooks that give you full control over the UI.
• Automatic Sync: State is kept in sync with the server and WebSocket events automatically.
• Provider Pattern: Easily inject configuration across your entire application.

Installation

npm install @anonfly/sdk @anonfly/react

Quick Start

import { AnonflyProvider } from '@anonfly/react';

const config = {
  apiKey: 'YOUR_API_KEY',
  baseUrl: 'https://api.anonfly.com/v1',
};

function App() {
  return (
    <AnonflyProvider config={config}>
      <MainApp />
    </AnonflyProvider>
  );
}

Core Hooks

useAnonflyMessages(roomId)

Manages message fetching, sending, and real-time updates for a specific room.

const { messages, loading, sendMessage, error } = useAnonflyMessages('general');

useAnonflyAuth()

Handles the authentication state, login, and registration.

const { user, login, logout, isAuthenticated } = useAnonflyAuth();

useAnonflyPresence(roomId)

Track which users are currently online in a room.

const { participants } = useAnonflyPresence('general');

useAnonflyConversations()

Lists and manages the current user's active rooms and conversations.

const { conversations, refresh } = useAnonflyConversations();

Advanced Usage

Customizing Reconnection Logic

You can pass SDK-specific configuration directly to the AnonflyProvider.

<AnonflyProvider config={{ ...config, retries: 5 }}>
  {/* ... */}
</AnonflyProvider>

Accessing the SDK Instance

If you need to perform low-level operations, you can access the raw SDK instance:

import { useAnonfly } from '@anonfly/react';

const sdk = useAnonfly();
// sdk.http.get(...)

License

MIT