@anonfly/react 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,21 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/codewithasterixh/anonflyclient/main/public/logo.png" width="96" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
1
5
|
# @anonfly/react
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
[](https://www.npmjs.com/package/@anonfly/react)
|
|
8
|
+
[](https://www.npmjs.com/package/@anonfly/react)
|
|
9
|
+
|
|
10
|
+
React hooks and headless components for the Anonfly SDK. Build premium, secure messaging interfaces with ease.
|
|
11
|
+
|
|
12
|
+
## Why use @anonfly/react?
|
|
13
|
+
|
|
14
|
+
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.
|
|
15
|
+
|
|
16
|
+
- **Headless Hooks:** Pure logic hooks that give you full control over the UI.
|
|
17
|
+
- **Automatic Sync:** State is kept in sync with the server and WebSocket events automatically.
|
|
18
|
+
- **Provider Pattern:** Easily inject configuration across your entire application.
|
|
4
19
|
|
|
5
20
|
## Installation
|
|
6
21
|
|
|
@@ -11,24 +26,73 @@ npm install @anonfly/sdk @anonfly/react
|
|
|
11
26
|
## Quick Start
|
|
12
27
|
|
|
13
28
|
```tsx
|
|
14
|
-
import { AnonflyProvider
|
|
29
|
+
import { AnonflyProvider } from '@anonfly/react';
|
|
15
30
|
|
|
16
31
|
const config = {
|
|
17
32
|
apiKey: 'YOUR_API_KEY',
|
|
18
33
|
baseUrl: 'https://api.anonfly.com/v1',
|
|
19
|
-
wsUrl: 'wss://api.anonfly.com',
|
|
20
34
|
};
|
|
21
35
|
|
|
22
36
|
function App() {
|
|
23
37
|
return (
|
|
24
38
|
<AnonflyProvider config={config}>
|
|
25
|
-
<
|
|
26
|
-
<ChatInput roomId="general" />
|
|
39
|
+
<MainApp />
|
|
27
40
|
</AnonflyProvider>
|
|
28
41
|
);
|
|
29
42
|
}
|
|
30
43
|
```
|
|
31
44
|
|
|
45
|
+
## Core Hooks
|
|
46
|
+
|
|
47
|
+
### `useAnonflyMessages(roomId)`
|
|
48
|
+
Manages message fetching, sending, and real-time updates for a specific room.
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
const { messages, loading, sendMessage, error } = useAnonflyMessages('general');
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### `useAnonflyAuth()`
|
|
55
|
+
Handles the authentication state, login, and registration.
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
const { user, login, logout, isAuthenticated } = useAnonflyAuth();
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### `useAnonflyPresence(roomId)`
|
|
62
|
+
Track which users are currently online in a room.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
const { participants } = useAnonflyPresence('general');
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### `useAnonflyConversations()`
|
|
69
|
+
Lists and manages the current user's active rooms and conversations.
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
const { conversations, refresh } = useAnonflyConversations();
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Advanced Usage
|
|
76
|
+
|
|
77
|
+
### Customizing Reconnection Logic
|
|
78
|
+
You can pass SDK-specific configuration directly to the `AnonflyProvider`.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<AnonflyProvider config={{ ...config, retries: 5 }}>
|
|
82
|
+
{/* ... */}
|
|
83
|
+
</AnonflyProvider>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Accessing the SDK Instance
|
|
87
|
+
If you need to perform low-level operations, you can access the raw SDK instance:
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { useAnonfly } from '@anonfly/react';
|
|
91
|
+
|
|
92
|
+
const sdk = useAnonfly();
|
|
93
|
+
// sdk.http.get(...)
|
|
94
|
+
```
|
|
95
|
+
|
|
32
96
|
## License
|
|
33
97
|
|
|
34
|
-
MIT
|
|
98
|
+
[MIT](../../LICENSE)
|